English

<use>

Réutiliser un symbole sans le dupliquer

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • svg

<use> + <defs> + <symbol> — Réutilisation SVG

<defs> contient des définitions graphiques qui ne sont pas rendues directement. <symbol> définit un symbole réutilisable avec son propre viewBox. <use> instancie ce symbole à l'endroit voulu, autant de fois que nécessaire.

Quand l'utiliser

Tu veux utiliser la même icône a plusieurs endroits sans dupliquer le code SVG. Tu définis l'icône une fois dans <defs> via <symbol>, puis tu la places avec <use href="#id">. C'est le système d'icônes SVG le plus léger et le plus maintenable.

Ce que tu gagnes

Accessibilité : chaque <use> peut avoir son propre <title> pour contextualiser l'instance. Le <symbol> peut contenir un <title> par défaut, surcharge par celui de l'instance <use>.

Exemple de code

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <defs>
    <symbol id="icon-star" viewBox="0 0 24 24">
      <title>Star</title>
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87
               1.18 6.88L12 17.77l-6.18 3.25L7 14.14
               2 9.27l6.91-1.01z" />
    </symbol>
  </defs>
</svg>
 
<!-- Reuse anywhere -->
<svg aria-hidden="true" width="24" height="24">
  <use href="#icon-star" />
</svg>
 
<svg role="img" aria-label="Favorite" width="24" height="24">
  <use href="#icon-star" />
</svg>

Pour aller plus loin