Open In App
Related Articles

SVG <symbol> Element

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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


Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads