"<symbol>"

Defines a symbol element that can be used to define graphical templates which are not rendered directly but can be instantiated by a "<use>" element. A symbol element establishes a nested coordinate system for the graphics it contains. When the symbol is referenced by a "<use>" element, its content is rendered similarly to a nested "<svg>" element.

• DOM object: SVGSymbolElement
• SVG2 spec: https://www.w3.org/TR/SVG2/struct.html#SymbolElement

<symbol id="icon" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"
        x="0" y="0" width="100" height="100" refX="50" refY="50">
  <circle cx="50" cy="50" r="40" fill="blue" />
</symbol>

Attribute	Default	Description
viewBox	(none)	A list of four numbers (min-x, min-y, width, height) separated by whitespace and/or commas that specify a rectangle in user space which is mapped to the symbol's viewport.
preserveAspectRatio	xMidYMid meet	Determines how the symbol's contents are scaled to fit the viewport defined by viewBox. Only applies if viewBox is specified.
x	0	The x coordinate of the symbol's viewport.
y	0	The y coordinate of the symbol's viewport.
width	auto	The width of the symbol's viewport. A value of auto is interpreted as 100% when instantiated.
height	auto	The height of the symbol's viewport. A value of auto is interpreted as 100% when instantiated.
refX	0	The reference x coordinate used when the symbol is instantiated via a "<use>" element.
refY	0	The reference y coordinate used when the symbol is instantiated via a "<use>" element.