Les groupes — la balise <g> en SVG — ressemblent un peu aux éléments <div> de nos pages web en ce sens qu’ils permettent de contenir et de contrôler des éléments ayant une relation les uns avec les autres.

Toutefois, il existe des différences entre <g> et <div> qu’il est important de bien comprendre.

• De même que les éléments <div>, les éléments <g> permettent à leurs éléments descendants d’hériter de leurs styles :

<svg viewBox="0 0 400 160">
    <g fill="#33E" stroke="#000" stroke-width="10px">
        <circle  cx="88" cy="80" r="62"/>
        <rect x="246" y="17" width="123" height="123"/>
    </g>
</svg>

Ce qui nous donne :

• De même, les transformations appliquées à des groupes sont héritées par les éléments situés à l’intérieur du groupe.
• Cependant, contrairement aux éléments <div>, les groupes SVG ne peuvent pas être positionnés. Ils peuvent être déplacés vers une nouvelle position, via transform, mais du fait qu’ils n’ont pas d’attributs x ou y, ils ne peuvent être positionnés dans le document SVG. On peut contourner le problème en imbriquant les éléments <svg> à l’intérieur de groupes, puisque les éléments <svg> ont des attributs x et y. Je reviendrai là-dessus dans un article à venir.
• Tout comme les éléments <div>, les éléments <g> peuvent avoir un attribut id (et également des classes, même si c’est moins courant), pour les styles ou les scripts :

<svg viewBox="0 0 400 163">
<style type="text/css">
    #svg-container {
        fill: hsl(45,80%,80%);
        stroke: rgba(0,0,0,0.3);
        stroke-width: 10px;
    }
</style>
    <g id="svg-container">
        <circle  cx="88" cy="80" r="62"/>
        <rect x="246" y="17" width="123" height="123"/>
    </g>
</svg>

Ce qui crée :

Tout comme en CSS, les règles de présentation appliquées directement aux éléments écraseront les règles héritées de leurs éléments parents si les deux entrent en conflit.

• Enfin, contrairement aux éléments <div>, les éléments <g> peuvent avoir leurs propres éléments <title> (titre) et <desc> (description) imbriqués pour ajouter des informations supplémentaires et améliorer l’accessibilité.

Attention : Adobe Illustrator et d’autres éditeurs graphiques surchargent de code leurs exports SVG en utilisant de nombreux éléments <g> souvent inutiles (et en général liés à des calques multiples). Pour éviter cela, il est conseillé de fusionner les calques avant de sauvegarder le fichier en format SVG. Une autre solution est d’utiliser un outil comme SVGoMG de Jake Archibald qui pourra supprimer les éléments groupes redondants lors du processus de minification.

Photo par Dina Belenko reproduite avec sa permission.