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:

<!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:

<!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

Article Tags :

HTML

Web Technologies

HTML-SVG

SVG-Element