SVG <symbol> Element

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The SVG <symbol> element is used to define graphical template objects which can be instantiated by the <use> element. The use of symbol elements for graphics that are used multiple times in the same document adds structure and semantics.

Syntax:

<symbol attribute="" >
    content Here
</symbol>

Attribute:

x: x-axis coordinates the positioning of the image.
y: y-axis coordinates the positioning of the image.
width: Width of the image.
height: Height of the image.
viewBox: Bound of the SVG element.
Global Attributes: Some global attributes used like core attributes and styling attributes, etc.

Example 1:

html

<!DOCTYPE html>
<html>

<body>
    <svg width="400" height="400"
        xmlns="http://www.w3.org/2000/svg">
        <symbol id="circ" 
                width="10" 
                height="10" 
                viewBox="0 0 2 2">
            <circle cx="1" cy="1" r="1" />
        </symbol>       
        
        <use xlink:href="#circ" x="5"  y="5"/>
    </svg>
</body>

</html>

Output: A dot symbol.

Example 2: html

<!DOCTYPE html>
<html>

<body>
    <svg viewBox="0 0 80 20"
        xmlns="http://www.w3.org/2000/svg">
        <symbol id="circ" 
                width="10" 
                height="10" 
                viewBox="0 0 2 2">
            <rect height="10" width="10" />
        </symbol>       
        
        <use xlink:href="#circ" x="5" 
             y="5" opacity="0.5" fill="green"/>
    </svg>
</body>

</html>

Output:

Supported Browsers: The following browsers are supported by this SVG element:

Chrome
Edge
Firefox
Safari
Internet Explorer
Opera

Explore