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.