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

Das <symbol>-Element wird verwendet, um grafische Vorlageobjekte zu definieren, die von einem <use>-Element instanziiert werden können.

Die Verwendung von <symbol>-Elementen für Grafiken, die mehrmals in demselben Dokument verwendet werden, fügt Struktur und Semantik hinzu. Dokumente, die reich an Struktur sind, können grafisch, als Sprache oder als Braille-Text dargestellt werden und fördern somit die Zugänglichkeit.

Beispiel

html
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <!-- Our symbol in its own coordinate system -->
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" />
  </symbol>

  <!-- A grid to materialize our symbol positioning -->
  <path
    d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
    fill="none"
    stroke="pink" />

  <!-- All instances of our symbol -->
  <use href="#myDot" x="5" y="5" style="opacity:1.0" />
  <use href="#myDot" x="20" y="5" style="opacity:0.8" />
  <use href="#myDot" x="35" y="5" style="opacity:0.6" />
  <use href="#myDot" x="50" y="5" style="opacity:0.4" />
  <use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>

Attribute

height

Dieses Attribut bestimmt die Höhe des Symbols. Wertetyp: <Länge>|<Prozentsatz> ; Standardwert: auto; Animierbar: ja

preserveAspectRatio

Dieses Attribut definiert, wie das SVG-Fragment verformt werden muss, wenn es in einem Container mit einem anderen Seitenverhältnis eingebettet ist. Wertetyp: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Standardwert: xMidYMid meet; Animierbar: ja

refX

Dieses Attribut bestimmt die x-Koordinate des Referenzpunktes des Symbols. Wertetyp: <Länge>|<Prozentsatz>|left|center|right ; Standardwert: Keine; Animierbar: ja

refY

Dieses Attribut bestimmt die y-Koordinate des Referenzpunktes des Symbols. Wertetyp: <Länge>|<Prozentsatz>|top|center|bottom ; Standardwert: Keine; Animierbar: ja

viewBox

Dieses Attribut definiert die Begrenzung des SVG-Ansichtsfensters für das aktuelle Symbol. Wertetyp: <list-of-numbers> ; Standardwert: Keine; Animierbar: ja

width

Dieses Attribut bestimmt die Breite des Symbols. Wertetyp: <Länge>|<Prozentsatz> ; Standardwert: auto; Animierbar: ja

x

Dieses Attribut bestimmt die x-Koordinate des Symbols. Wertetyp: <Länge>|<Prozentsatz> ; Standardwert: 0; Animierbar: ja

y

Dieses Attribut bestimmt die y-Koordinate des Symbols. Wertetyp: <Länge>|<Prozentsatz> ; Standardwert: 0; Animierbar: ja

Verwendungskontext

KategorienContainer-Element, Strukturelement
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Animationselemente
Beschreibende Elemente
Formelemente
Strukturelemente
Gradient-Elemente
<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Hinweis: Ein <symbol>-Element selbst soll nicht dargestellt werden. Nur Instanzen eines <symbol>-Elements (d. h. ein Verweis auf ein <symbol> durch ein <use>-Element) werden dargestellt. Das bedeutet, dass einige Browser sich weigern könnten, ein <symbol>-Element direkt anzuzeigen, selbst wenn die CSS-Eigenschaft display etwas anderes angibt.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# SymbolElement

Browser-Kompatibilität

BCD tables only load in the browser