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:

Output: A dot symbol.

👁 Image

Example 2:

<!DOCTYPE html>
<html>

<body>
 <svg viewBox="0 0 80 20"
 xmlns="http://www.w3.org/2000/svg">
 <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>