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:
<!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 > |
chevron_right
filter_none
Output:
Example 2:
<!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 > |
chevron_right
filter_none
Output:
Supported Browsers:
- Chrome
- Edge
- Firefox
- Safari
- Internet Explorer
- Opera