<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> SVG Element wird verwendet, um grafische Vorlagenobjekte zu definieren, die durch ein <use> Element instanziiert werden können.

Die Verwendung von <symbol> Elementen für Grafiken, die mehrfach im selben Dokument verwendet werden, fügt Struktur und Semantik hinzu. Dokumente, die reich an Struktur sind, können grafisch, als Sprache oder als Braille wiedergegeben 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: <length>|<percentage> ; 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 wird. 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 Referenzpunkts des Symbols. Wertetyp: <length>|<percentage>|left|center|right ; Standardwert: keiner; Animierbar: ja

refY

Dieses Attribut bestimmt die y-Koordinate des Referenzpunkts des Symbols. Wertetyp: <length>|<percentage>|top|center|bottom ; Standardwert: keiner; Animierbar: ja

viewBox

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

width

Dieses Attribut bestimmt die Breite des Symbols. Wertetyp: <length>|<percentage> ; Standardwert: auto; Animierbar: ja

x

Dieses Attribut bestimmt die x-Koordinate des Symbols. Wertetyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja

y

Dieses Attribut bestimmt die y-Koordinate des Symbols. Wertetyp: <length>|<percentage> ; 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 ist nicht zur Darstellung gedacht. Nur Instanzen eines <symbol> Elements (d.h. eine Referenz auf ein <symbol> durch ein <use> Element) werden dargestellt. Das bedeutet, dass einige Browser möglicherweise die direkte Anzeige eines <symbol> Elements verweigern, selbst wenn die CSS Eigenschaft display etwas anderes angibt.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# SymbolElement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
symbol
preserveAspectRatio
viewBox

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support