SVG <use> Element
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