<symbol>

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'élémentSVG<symbol> est utilisé pour définir des objets graphiques modèles pouvant être instanciés par un élément SVG<use>.

L'utilisation d'éléments<symbol> pour des graphiques réutilisés plusieurs fois dans un même document ajoute de la structure et de la sémantique. Des documents riches en structure peuvent être rendus graphiquement, sous forme parlée ou en braille, et favorisent ainsi l'accessibilité.

Note :Un élément<symbol> n'est pas destiné à être rendu lui-même. Seules les instances d'un élément<symbol> (c.-à-d. une référence à un<symbol> par un élément<use>) sont rendues. Cela signifie que certains navigateurs peuvent refuser d'afficher directement un élément<symbol> même si la propriété CSSdisplay indique le contraire.

Contexte d'utilisation

Catégories	Élément conteneur, Élément structurel
Contenu autorisé	Tout élément de cette liste, quel qu'en soit l'ordre : Éléments d'animation Éléments descriptifs Éléments de formes Éléments structurels Éléments de dégradés `<a>`,`<clipPath>`,`<filter>`,`<foreignObject>`,`<image>`,`<marker>`,`<mask>`,`<pattern>`,`<script>`,`<style>`,`<switch>`,`<text>`,`<view>`

Attributs

height: Cet attribut détermine la hauteur du symbole.Type de valeur :<length>|<percentage> ;Valeur par défaut :auto;Animation :oui
preserveAspectRatio: Cet attribut définit comment le fragment svg doit être déformé s'il est inclus dans un conteneur ayant un ratio d'affichage (largeur:hauteur) différent.Type de valeur : (none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)? ;Valeur par défaut :xMidYMid meet;Animation :oui
refX: Cet attribut détermine la coordonnée x du point de référence du symbole.Type de valeur :<length>|<percentage>|left|center|right ;Valeur par défaut :0;Animation :oui
refY: Cet attribut détermine la coordonnée y du point de référence du symbole.Type de valeur :<length>|<percentage>|top|center|bottom ;Valeur par défaut :0;Animation :oui
viewBox: Cet attribut définit les limites de la zone d'affichage du symbole.Type de valeur :<list-of-numbers> ;Valeur par défaut : aucune;Animation :oui
width: Cet attribut définit la largeur du symbole.Type de valeur :<length>|<percentage> ;Valeur par défaut :auto;Animation :oui
x: Cet attribut détermine la coordonnée x du symbole.Type de valeur :<length>|<percentage> ;Valeur par défaut :0;Animation :oui
y: Cet attribut détermine la coordonnée y du symbole.Type de valeur :<length>|<percentage> ;Valeur par défaut :0;Animation :oui

Interface DOM

Cet élément implémente l'interfaceSVGSymbolElement.

Exemple

html,body,svg {  height: 100%;}

html

<svg  viewBox="0 0 80 20"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">  <!-- Notre symbol a son propre système de coordonnées -->  <symbol width="10" height="10" viewBox="0 0 2 2">    <circle cx="1" cy="1" r="1" />  </symbol>  <!-- Une grille pour matérialiser le positionnement du symbole -->  <path    d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"    fill="none"    stroke="pink" />  <!-- Multiples instances de notre symbole -->  <use xlink:href="#myDot" x="5" y="5" />  <use xlink:href="#myDot" x="20" y="5" />  <use xlink:href="#myDot" x="35" y="5" />  <use xlink:href="#myDot" x="50" y="5" />  <use xlink:href="#myDot" x="65" y="5" /></svg>