Les bases de SVG : Groupes

Suite des bases de SVG par Dudley Storey : les groupes SVG ressemblent aux éléments div des pages web mais il existe des différences qu’il est important de bien comprendre.

Par

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.

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.

Dans la même série :

Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Les bases de SVG : Polygones
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Groupes


Intéressé par SVG ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur SVG parus dans la Cascade.


Du même auteur dans La Cascade :

Les bases de SVG : Groupes
Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.