<g>

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. It draws nothing of its own, but any attributes you set on it - transform, fill, stroke, opacity, filter, clip-path, etc. - cascade down to all of its children. Think of it as the SVG equivalent of HTML's <div>: a wrapper that groups related elements so you can move, scale, recolor, or hide them all 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>