The symbol element for SVG specifies graphical templates which can be instantiated by a use element but which are not rendered directly.
Specifies the height of the element.
auto | <length-percentage> Specifies whether or not to force uniform scaling.
Specifies the x-coordinate of the reference point.
<length> | left | center | right Specifies the y-coordinate of the reference point.
<length> | top | center | bottom Specifies a rectangle in user space.
A list of four numbers: min-x , min-y , width , and height that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the preserveAspectRatio attribute. The presence of the viewBox attribute results in a transformation being applied to the viewport coordinate system.
[ <min-x>,? <min-y>,? <width>,? <height> ] Specifies the width of the element.
auto | <length-percentage> Specifies the x-coordinate of the element.
Specifies the y-coordinate of the element.
<svg xmlns="http://www.w3.org/2000/svg">
<symbol height="50%" id="myid1">
<circle cx="50%" cy="50%" r="50vh"/>
</symbol>
<symbol height="50" id="myid2">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid1" y="50vh"/>
<use fill="blue" href="#myid1" y="100vh"/>
<use href="#myid2"/>
<use fill="red" href="#myid2" y="50"/>
<use fill="blue" href="#myid2" y="100"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid" preserveAspectRatio="xMinYMin" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid"/>
<use fill="red" href="#myid" x="100"/>
<use fill="blue" href="#myid" x="200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid" preserveAspectRatio="xMidYMid slice" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid"/>
<use fill="red" href="#myid" x="100"/>
<use fill="blue" href="#myid" x="200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid" refX="center">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid"/>
<use fill="red" href="#myid" y="100"/>
<use fill="blue" href="#myid" y="200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid" refX="left">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid"/>
<use fill="red" href="#myid" y="100"/>
<use fill="blue" href="#myid" y="200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid" refX="100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid"/>
<use fill="red" href="#myid" y="100"/>
<use fill="blue" href="#myid" y="200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid" refX="right">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid"/>
<use fill="red" href="#myid" y="100"/>
<use fill="blue" href="#myid" y="200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid" refY="bottom">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid"/>
<use fill="red" href="#myid" x="100"/>
<use fill="blue" href="#myid" x="200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid" refY="center">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid"/>
<use fill="red" href="#myid" x="100"/>
<use fill="blue" href="#myid" x="200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid" refY="100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid"/>
<use fill="red" href="#myid" x="100"/>
<use fill="blue" href="#myid" x="200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid" refY="top">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid"/>
<use fill="red" href="#myid" x="100"/>
<use fill="blue" href="#myid" x="200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid1" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid2" viewBox="0 0 100 50">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid3" viewBox="0 0 100 200">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid2"/>
<use fill="blue" href="#myid3"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid1" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid2" viewBox="-50 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid3" viewBox="50 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid2"/>
<use fill="blue" href="#myid3"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid1" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid2" viewBox="0 -50 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid3" viewBox="0 50 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid2"/>
<use fill="blue" href="#myid3"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid1" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid2" viewBox="0 0 50 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid3" viewBox="0 0 200 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid2"/>
<use fill="blue" href="#myid3"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid"/>
<use fill="red" href="#myid" x="100"/>
<use fill="green" href="#myid" x="200"/>
<use fill="blue" href="#myid" x="300"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid1" width="50%">
<circle cx="50%" cy="50%" r="50vh"/>
</symbol>
<symbol id="myid2" width="50">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid1" x="50vw"/>
<use fill="blue" href="#myid1" x="100vw"/>
<use href="#myid2"/>
<use fill="red" href="#myid2" x="50"/>
<use fill="blue" href="#myid2" x="100"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid1" x="50%">
<circle cx="50%" cy="50%" r="50vh"/>
</symbol>
<symbol id="myid2" x="50">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid1" y="100vh"/>
<use fill="blue" href="#myid1" y="200vh"/>
<use href="#myid2"/>
<use fill="red" href="#myid2" y="100"/>
<use fill="blue" href="#myid2" y="200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid1" y="50%">
<circle cx="50%" cy="50%" r="50vh"/>
</symbol>
<symbol id="myid2" y="50">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid1" x="100vh"/>
<use fill="blue" href="#myid1" x="200vh"/>
<use href="#myid2"/>
<use fill="red" href="#myid2" x="100"/>
<use fill="blue" href="#myid2" x="200"/>
</svg>