SVG <use> 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 <use> element takes nodes from within the SVG document and duplicates them somewhere else.

Syntax:

<use href="" >
    Subtext
</use>

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.
href: The source of the image.
Global Attributes: Some global attributes used like core attributes and styling attributes, etc.

Example 1:

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg width="400" height="200"
        xmlns="http://www.w3.org/2000/svg">        
        <circle id="gfg" 
                cx="100" 
                cy="100" 
                r="40" 
                fill="green"/> 
          
        <use href="#gfg" x="110"></use> 
    </svg> 
</body> 
  
</html>

Output:

Example 2:

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg width="400" height="200"
        xmlns="http://www.w3.org/2000/svg">   
        <a href="https://ide.geeksforgeeks.org"
           id="gfg">       
            <text x="50"
                  y="90" 
                  text-anchor="middle"> 
                Click Here 
            </text> 
        </a> 
        <use href="#gfg"
             y="110"></use> 
    </svg> 
</body> 
  
</html>

Output:

Supported Browsers:

Chrome
Edge
Firefox
Safari
Internet Explorer
Opera

My Personal Notes

Related Articles