g - Group element

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:

Text grouped with shapes