Skip to content
Related Articles

Related Articles

Improve Article
SVG <symbol> Element
  • Last Updated : 14 Oct, 2020

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :