SVG symbol and id Referencing

How symbol Elements Define Reusable Content

A <symbol> element behaves like a template — it's never rendered directly on its own, but instead defines reusable graphical content identified by a unique id attribute, ready to be instantiated elsewhere in the document any number of times without duplicating the underlying path data each time it's used.

• symbol elements are never rendered directly by themselves
• Each symbol's unique id attribute is what <use> references to instantiate it
• Underlying path data is defined once regardless of how many times it's used

Referencing Symbols with the use Element

The <use href="#icon-id"> element instantiates a previously defined symbol at a specific location, and each individual <use> reference can have its own x, y, width, height, and CSS styling applied independently, so the same underlying icon definition can appear multiple times on a page at different sizes, positions, and colors.

• <use href="#id"> instantiates a symbol wherever it's placed in the document
• Each use element can have independent size, position, and styling
• Same underlying symbol definition can appear many times with different appearances

Frequently Asked Questions

Related guides