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:
html
<!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:
html
<!DOCTYPE html><html>
<body>
<svg width="400" height="200"
xmlns="http://www.w3.org/2000/svg">
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 22 and above
- Edge 12 and above
- Firefox 4 and above
- Safari 3 and above
- Internet Explorer
- Opera 11.5 and above