<symbol>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The <symbol> SVG 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.
Usage context
| Categories | Container element, Structural element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements Structural elements Gradient elements <a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
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: None; 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: None; 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
DOM Interface
This element implements the SVGSymbolElement interface.
Example
<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" opacity="1.0" />
<use href="#myDot" x="20" y="5" opacity="0.8" />
<use href="#myDot" x="35" y="5" opacity="0.6" />
<use href="#myDot" x="50" y="5" opacity="0.4" />
<use href="#myDot" x="65" y="5" opacity="0.2" />
</svg>
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # SymbolElement |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
symbol
|
|
|
|
|
|
|
|
|
|
|
|
|
preserveAspectRatio
|
|
|
|
|
|
|
|
|
|
|
|
|
viewBox
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support