W3cubDocs

/SVG

<symbol>

The <symbol> element is used to define graphical template objects which can be instantiated by a <use> element.

The use of symbol elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as Braille, and thus promote accessibility.

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- 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 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>

Attributes

height
This attribute determines the height of the symbol.
Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
preserveAspectRatio
This attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.
Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
refX
This attribute determines the x coordinate of the reference point of the symbol.
Value type: <length>|<percentage>|left|center|right ; Default value: 0; Animatable: yes
refY
This attribute determines the y coordinate of the reference point of the symbol.
Value type: <length>|<percentage>|top|center|bottom ; Default value: 0; Animatable: yes
viewBox
This attribute defines the bound of the SVG viewport for the current symbol.
Value type: <list-of-numbers> ; Default value: none; Animatable: yes
width
This attribute determines the width of the symbol.
Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
x
This attribute determines the x coordinate of the symbol.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
y
This attribute determines the y coordinate of the symbol.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

Global attributes

Core Attributes
Most notably: id
Styling Attributes
class, style
Event Attributes
Global event attributes, Document element event attributes, Graphical event attributes
Presentation Attributes
Most notably: 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
Aria Attributes
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

Usage notes

Note: A <symbol> element itself is not meant to be rendered. Only instances of a <symbol> element (i.e., a reference to a <symbol> by a <use> element) are rendered. That means that some browsers could refuse to directly display a <symbol> element even if the CSS display property tells otherwise.

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<symbol>' in that specification.
Candidate Recommendation Allowed geometry properties to be specified on a symbol
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<symbol>' in that specification.
Recommendation Initial definition

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
symbol 1 12 1.5 9 9 3.1
preserveAspectRatio ? ? ? ? ? ?
viewBox ? ? ? ? ? ?
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
symbol 3 18 4 Yes 3.1 1.0
preserveAspectRatio ? ? ? ? ? ?
viewBox ? ? ? ? ? ?

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol