Creates a group of elements which can be transformed as a single object.

DOM object: SVGGElement
SVG2 spec: https://www.w3.org/TR/SVG2/struct.html#GElement

The <g> element (short for "group") is a purely organizational container and draws nothing of its own. Inherited presentation properties such as fill and stroke supply values to children that do not override them. A transform changes the group's coordinate system, while opacity, filter, and clip-path apply to the group as a composited unit. Together these features let you move, scale, recolor, or hide related elements at once.

Use <g> whenever you want to apply a transform, style, filter, or clip to multiple elements as one unit, or simply to organize a complex drawing into logical sub-components. Unlike <defs>, groups are rendered in-place; unlike <symbol>, they are drawn exactly once at the position where they appear.

<g transform="translate(50 100)">
  <rect width="100" height="100" fill="black" />
  <rect x="50" y="50" width="100" height="100" fill="lime" />
</g>