Bibliothèque

Réutilisation des éléments

Chaque objet référencé avec un identifiant id peut être dupliquer et réutiliser n'importe où dans le document à l'aide de la balise <use>.

<svg>
  <circle id="cercle" fill="#3ed124" cx="50" cy="50" r="25" />
  ...
  <use href="#cercle" x="75" y="0">
</svg>

Cete méthode n'est pas une bonne pratique car le code est difficilement lisibile et maintenable.

Bibliothèque d'éléments

À la place, nous pouvons stoker les éléments réutilisables dans une bibliothèque avec la balise <defs>. Les éléments ne sont alors plus affichés directement.

Lorsque l'on utilise le SVG en mode inline incorporé directement dans la page HTML, les éléments de la bibliothèque peuvent être utilisés dans le canvas ou dans un autre élément SVG de la même page.

<!-- Cette illustration SVG ne sera pas visible dans la page -->
<svg width="0" height="0">
<defs>
  <line id="ligneverte" stroke="#3ed124" x1="-50" y1="0" x2="50" y2="0"
    stroke-linecap="round" stroke-width="12" />
</defs>
</svg>
...
<!-- Une autre illustration plus loin dans la page HTML -->
<svg>
  <use href="#ligneverte" x="100" y="50"/>
</svg>

La bibliothèque permet des stocker des formes mais aussi des dégradés, des motifs, des masques, des marqueurs etc.

Symboles

L'élément symbol permet de définir une nouvelle zone de dessin indépendante et qui sera utilisée comme modèle (template).

<svg>
<defs>
<symbol id="etoile" viewBox="271 443 12240 12005">
  <path d="M6760 12443 c-137 -2 ..." />
</symbol>
</defs>
.
<use href="#etoile" x="100" y="25" width="100" height="100" fill="#3ed124"/>

L'intérêt du symbole est que l'on peut définir la surface de travail à l'aide de la propriété viewBox. Dans notre cas la zone commence à 271 px à gauche, 443 px en haut et fait 12240 px de largeur et 12005 px de hauteur !

Lors de son utilisation dans l'illustration SVG la taille du symbole est mise à l'échelle pour ne faire plus que 100 px, sa position est définie à l'aide des propriété x et y, la couleur de remplissage est de la balise use est propagée au symbole.

Attention un symbole appelé avec la balise <use> est affiché dans une zone shadow dom inaccessible au javascript et aux changements de style css.

Les seules propriétés qui peuvent traverser après la création du shadow dom sont : les propriétés fill, stroke et color.

la propriété css color doit être utilisée en svg avec la valeur currentColor par exemple fill="currentColor" la propriété color peut être utilisée soit pour le remplissage, soit pour le contour à condition d'utiliser la valeur currentColor

Références