use est l'outil de clonage de SVG, il permet de dupliquer des éléments existants ou prédéfinis et d'alléger votre code. Une introduction claire et concise, comme toujours, de Dudley Storey.

Par

use est l'outil de clonage de SVG : il offre la possibilité de dupliquer des éléments existants ou prédéfinis, tout en permettant d'appliquer des modifications aux copies clonées. use est une façon simple d'alléger votre code SVG en utilisant les meilleurs principes DRY ("Don't Repeat Yourself").

Cas d'usage

Voici quelques use cases :) Étant donné un élément SVG avec un id:

<circle cx="50" cy="50" r="10" fill="red" id="primcirc" />  

Nous pouvons répliquer cet élément avec use :

<use xlink:href="#primcirc" />  

Remarque : l'utilisation de xlink dans la référence implique que l'espace de nom xlink soit déclaré dans l'élément racine SVG.

La copie hérite de toutes les caractéristiques de l'original et par défaut ne peut en être distinguée, ce qui signifie que seules les modifications ajoutées en feront un élément unique. Toutefois, les modifications ne peuvent concerner ce qui a déjà été déclaré dans l'élément original. L'exemple suivant ne fonctionnera pas car il entre en contradiction avec l'original :

<use xlink:href="#primcirc" fill="blue" />  

La copie apparaîtra rouge, et non bleue, la couleur de remplissage (fill) ayant été définie dans l'élément source. Par contre l'ajout d'un nouvel attribut fonctionnera :

<use xlink:href="#primcirc" stroke="black" />  

Cette fois-ci, la copie aura toujours une couleur de remplissage rouge, mais des traits (stroke) de contours noirs.

Utiliser defs

Pour contourner le problème, l'élément "source" est souvent placé dans un élément <defs> comprenant les attributs qui ne seront pas modifiés dans les clones :

<defs>  
    <circle r="10" id="primcirc" />
</defs>  

Rien de ce qui apparaît dans un élément <defs> ne sera rendu dans le SVG, les éléments ainsi définis ne pouvant apparaître que via une référence. Dans ce cas, nous ajoutons au clone les attributs qui manquaient dans la définition originale :

<use xlink:href="#primcirc" cx="50" cy="50" fill="red" />  

Ceci crée la première instance visible de notre cercle. Il a un rayon de 5, hérité de l'original, mais sa position et sa couleur de remplissage lui sont propres.
Nous pouvons facilement créer une autre copie en ajoutant une nouvelle référence use :

<use xlink:href="#primcirc" cx="80" cy="80" fill="yellow" />  

Les deux cercles ont un rayon égal à 5, dérivé (et non modifiable) de la définition originale, mais chacun a sa propre position et couleur de remplissage.
Si la définition originale de l'élément comprenait une position...

<defs>  
    <circle r="10" cx="50" cy="50" id="primcirc" />
</defs>  

...alors nous pourrions modifier la position du clone en utilisant une transformation transform :

<use xlink:href="#primcirc" fill="yellow" transform="translate(50 50)" />  

Remarque : les attributs prédéfinis peuvent être modifiés dans les clones référencés à l'aide de techniques similaires. Un changement de fill via opacity ou blend-mode par exemple.

Les changements d'opacité ou autres apportés à la définition originale seront reflétés dans les clones.

Il n'y a pas que les éléments qui peuvent ainsi être clonés et référencés : nous pouvons également regrouper des éléments, donner un id au groupe et l'utiliser autant de fois que nous le voulons.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">  
<defs>  
    <g id="primgroup">
        <circle cx="50" cy="50" r="10" fill="red" />
        <circle cx="70" cy="70" r="10" fill="blue" />
    </g>
</defs>  
    <use xlink:href="#primgroup" />
</svg>  

J'utilise les éléments circle pour la simplicité de la démonstration, mais les sources peuvent être à peu près ce que vous voulez. Il est également possible de générer des références use avec JavaScript, mais ce sera pour un autre article.


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

Tous les articles sur les bases de SVG parus dans la Cascade.
Tous les articles sur SVG parus dans la Cascade.


Du même auteur dans La Cascade :

Backgrounds SVG : hexagones et écailles
Motifs SVG maoris
Les bases de SVG : Groupes
Bien utiliser l’attribut alt
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


Ressources complémentaires en anglais

La documentation SVG de MDN, et en particulier :
SVG Attribute Reference, la liste des attributs SVG

Ressources complémentaires en français

Structuration: éléments de groupage et références


original paru le 28 juin 2016 dans the new code
Traduit avec l’aimable autorisation de the new code et de l’auteur.
Copyright the new code © 2016
.

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 the new code des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.