Skip to content
Related Articles

Related Articles

SVG <use> Element

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 16 Jun, 2022

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.


<use href="" >


  • 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>
    <svg width="400" height="200"
        <circle id="gfg"
        <use href="#gfg" x="110"></use>



Example 2: 


<!DOCTYPE html>
    <svg width="400" height="200"
        <a href=""
            <text x="50"
                Click Here
        <use href="#gfg"


Supported Browsers:

  • Chrome 22 and above
  • Edge 12 and above
  • Firefox 4 and above
  • Safari 3 and above
  • Internet Explorer
  • Opera 11.5 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!