The SVG <g>
element is used to group SVG shapes together. Once grouped you can transform the group of shapes as if it was a single shape. This is an advantage compared to a nested <svg>
element which cannot be transformed by itself.
You can also style the grouped elements, and reuse them as if they were a single element.
Here is a simple SVG g example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<line x1="10" y1="10" x2="85" y2="10"
style="stroke: #529587;"/>
<rect x="10" y="20" height="50" width="75"
style="stroke: #529587; fill: #529587"/>
<text x="10" y="90" style="stroke: #2A3945; fill: #2A3945">
Text grouped with shapes</text>
</g>
</svg>
Here is the result from the above code snippet: