Français

<g>

Group elements for styling or identifying them together

— 1 min read

  • HTML
  • accessibility
  • semantics
  • SVG

<g> — The SVG group

The <g> element groups SVG elements. It has no visual rendering of its own, but styles and transformations applied to the <g> propagate to all its children.

When to use it

You want to apply the same style (color, opacity) or the same transformation (translate, rotate) to a set of shapes. You also want to identify a subset of your SVG to target it with CSS or JavaScript, or to give it an accessible label.

What you gain

Accessibility: a <g> with aria-label or aria-labelledby gives an accessible name to a group of shapes. Useful when multiple primitives compose a single logical icon.

Code example

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="teal" opacity="0.8" aria-label="Status indicators">
    <circle cx="30" cy="50" r="20" />
    <circle cx="100" cy="50" r="20" />
    <circle cx="170" cy="50" r="20" />
  </g>
</svg>

Further reading