L'élément <symbol> est utilisé pour définir un template de graphique pouvant être instancié par un élément <use>.

L'utilisation d'éléments symbol pour les graphiques qui sont utilisés de multiples fois dans le même document permet d'améliorer la structure et la sémantique du document. Les documents fortement structurés peuvent plus facilement être rendus sous forme graphique, vocale, ou Braille, et ainsi favoriser leur accessibilité.

<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 id="myDot" 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" style="opacity:1.0" />
  <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" />
  <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" />
  <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" />
  <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>

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

Attributs globaux

Attributs de base
Notamment: id
Attributs de style
class, style
Attributs d'événement
Attributs d'événement globaux, Attributs d'événement des éléments du document, Attributs d'événement graphiques
Atttributs de présentation
Notamment: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
Attributs Aria
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Notes 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
Eléments de dégradés
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

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

Spécifications

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de '<symbol>' dans cette spécification.
Candidat au statut de recommandation Permet aux propriétés de géométrie d'être spécifiées sur un symbole
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<symbol>' dans cette spécification.
Recommendation Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
symbolChrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5IE Support complet 9Opera Support complet 9Safari Support complet 3.1WebView Android Support complet 3Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3.1Samsung Internet Android ?
preserveAspectRatioChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
viewBoxChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : mdnwebdocs-bot, a-mt
Dernière mise à jour par : mdnwebdocs-bot,