Une barre de navigation avec la même icône de recherche répétée trois fois, un tableau de bord qui réutilise dix fois la même flèche : plutôt que de redessiner le tracé à chaque fois, <use> rejoue un élément déjà défini ailleurs dans le document, comme un copier-coller vivant.
C'est la pièce qui manque pour rendre <symbol> utile : un symbole ne s'affiche jamais tout seul, c'est <use> qui déclenche réellement son rendu, autant de fois que nécessaire.
Définition
<use> insère une copie d'un élément déjà défini ailleurs dans le document, le plus souvent un <symbol>, mais aussi une simple forme ou un groupe, référencé par son attribut href. Chaque appel crée une instance indépendante, positionnable et redimensionnable sans toucher à la définition d'origine.
Attributs principaux
| Attribut | Rôle |
|---|---|
href | Référence l'identifiant de l'élément à réutiliser, par exemple #icone |
x, y | Position de la copie affichée |
width, height | Taille de la copie, effective seulement si la cible possède un viewBox |
width et height ne redimensionnent réellement un <symbol> que si celui-ci définit un viewBox : sans lui, ces deux attributs sont simplement ignorés par le navigateur. C'est une source d'incompréhension fréquente chez qui découvre l'élément : le redimensionnement semble ne rien faire, alors que c'est simplement le viewBox manquant qui bloque l'effet attendu.
Exemple de rendu concret
Une icône de cœur définie une seule fois, réutilisée trois fois à des couleurs et des tailles différentes : la base de la technique des sprites SVG.
<svg viewBox="0 0 260 90" xmlns="http://www.w3.org/2000/svg">
<symbol id="coeur" viewBox="0 0 24 24">
<path
d="M12 21 C12 21 3 14.5 3 8.5 C3 5 5.5 3 8.5 3 C10.5 3 12 4.5 12 4.5 C12 4.5 13.5 3 15.5 3 C18.5 3 21 5 21 8.5 C21 14.5 12 21 12 21 Z"
fill="currentColor"
/>
</symbol>
<use href="#coeur" x="10" y="10" width="30" height="30" color="#ef4444" />
<use href="#coeur" x="100" y="20" width="20" height="20" color="#f472b6" />
<use href="#coeur" x="180" y="30" width="14" height="14" color="#c084fc" />
</svg>Chaque <use> appelle le même symbole mais fixe sa propre taille et sa propre couleur via color, combiné à fill="currentColor" dans le symbole : c'est ce mécanisme qui permet des icônes monochromes réutilisables à volonté.
Différence avec copier-coller le SVG
Dupliquer le code d'une icône à la main revient à multiplier les lignes de <path> dans le fichier, avec le poids et les risques d'erreur qui vont avec. <use> ne copie rien : il référence, ce qui veut dire qu'une modification du <symbol> d'origine se répercute instantanément sur toutes ses copies affichées, sans retoucher chaque instance une par une. Cette économie se voit aussi sur la maintenance : corriger une icône mal proportionnée ne demande qu'une seule modification, répercutée automatiquement sur chaque bouton, chaque menu et chaque badge qui la réutilisent.
Piège classique : certains navigateurs bloquent, pour des raisons de sécurité, un href qui pointe vers un fichier SVG externe hébergé sur un autre domaine. Le sprite fonctionne alors en local mais reste invisible une fois le site mis en ligne, sauf à héberger le symbole dans la même page ou sur le même domaine.
Cas d'usage réel
C'est la base de la technique des sprites SVG pour les icônes d'interface : un seul fichier regroupe tous les <symbol>, et chaque bouton, chaque item de menu appelle la bonne icône avec un simple <use>, sans jamais dupliquer le tracé.
On retrouve aussi <use> dans les icônes météo animées, les jeux de badges de progression ou les cartes avec des marqueurs répétés : partout où un même dessin doit apparaître plusieurs fois, à des positions ou des couleurs différentes, sans alourdir le fichier.
Foire aux questions
use sur un élément qui n'est pas un symbol ?Oui, use peut référencer n'importe quel élément possédant un id, un <rect>, un <path> ou même un groupe entier. Le symbole reste toutefois préféré car il isole son propre système de coordonnées.
use peut-elle être stylisée différemment de l'original ?Oui, dans une certaine mesure : les propriétés non fixées explicitement sur l'original, comme fill quand le symbole utilise currentColor, peuvent être surchargées sur chaque use. Les propriétés déjà posées dans la définition d'origine restent en revanche prioritaires.
href n'existe pas ?Rien ne s'affiche, sans message d'erreur visible dans la page. C'est une erreur silencieuse fréquente, souvent due à une faute de frappe dans l'id ou à un symbole placé après le use qui tente de l'appeler.