<symbol>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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é.

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 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 Éléments de dégradés `<a>`, `<clipPath>`, `<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

Specification
Scalable Vector Graphics (SVG) 2 # SymbolElement

Compatibilité des navigateurs

BCD tables only load in the browser