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"
< 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"
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
Last Updated :
16 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...