Grouping

You can use <g> to group elements.

All of <g>'s attributes are inherited to its children.

SVG elements

`<g>`

Groups elements.

<!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g -->
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <!-- Using g to inherit presentation attributes -->
    <g fill="white" stroke="green" stroke-width="5">
      <circle cx="40" cy="40" r="25" />
      <circle cx="60" cy="60" r="25" />
    </g>
  </svg>

<!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g -->
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <!-- Using g to inherit presentation attributes -->
    <g fill="white" stroke="green" stroke-width="5">
      <circle cx="40" cy="40" r="25" />
      <circle cx="60" cy="60" r="25" />
    </g>
  </svg>

| LIVE PREVIEW

References

<g> (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g