SVG <symbol> Element
Last Updated :
31 Mar, 2022
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
The SVG <symbol> element is used to define graphical template objects which can be instantiated by the <use> element. The use of symbol elements for graphics that are used multiple times in the same document adds structure and semantics.
Syntax:
<symbol attribute="" >
content Here
</symbol>
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.
- viewBox: Bound of the SVG element.
- Global Attributes: Some global attributes used like core attributes and styling attributes, etc.
Example 1:
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="400"
<symbol id="circ"
width="10"
height="10"
viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<use xlink:href="#circ" x="5" y="5"/>
</svg>
</body>
</html>
|
Output: A dot symbol.
Example 2:
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 80 20"
<symbol id="circ"
width="10"
height="10"
viewBox="0 0 2 2">
<rect height="10" width="10" />
</symbol>
<use xlink:href="#circ" x="5"
y="5" opacity="0.5" fill="green"/>
</svg>
</body>
</html>
|
Output:
Supported Browsers: The following browsers are supported by this SVG element:
- Chrome
- Edge
- Firefox
- Safari
- Internet Explorer
- Opera
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...