English

<g>

Grouper des éléments pour les styliser ou les identifier ensemble

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • svg

<g> — Le groupe SVG

La balise <g> regroupe des éléments SVG. Elle n'a pas de rendu visuel propre, mais les styles et transformations appliques au <g> se propagent a tous ses enfants.

Quand l'utiliser

Tu veux appliquer un même style (couleur, opacité) ou une même transformation (translation, rotation) a un ensemble de formes. Tu veux aussi identifier un sous-ensemble de ton SVG pour le cibler en CSS ou JavaScript, ou pour lui donner un label accessible.

Ce que tu gagnes

Accessibilité : un <g> avec aria-label ou aria-labelledby donne un nom accessible a un groupe de formes. Utile quand plusieurs primitives composent une seule icône logique.

Exemple de code

<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>

Pour aller plus loin