SVG <symbol> Element

The SVG <symbol> element is used to define reusable symbols. Shapes nested within a <symbol> will not be displayed unless referenced by a <use> element.

The <symbol> element is used to define a graphic template object, which can be instantiated by a <use> element. The role of the <symbol> element in graphics is to reuse the same graphic in multiple places within a document, adding structure and semantics. A richly structured document can be presented more vividly, similar to a speech script or Braille, thereby enhancing accessibility. Note that a <symbol> element itself is not displayed. Only the example of the <symbol> element (i.e., a <use> element that references the symbol) can be displayed.

Symbol Examples

This is a simple symbol example:

<svg width="500" height="100">
　　　　<symbol id="shape2">
　　　　　　　　<circle cx="25" cy="25" r="25"　/>
　　　　</symbol>
　　　　<use xlink:href="#shape2" x="50" y="25"　/>
</svg>

The <symbol> element needs an id so that the <use> element can refer to it.

reserveAspectRatio and viewBox

The <symbol> element can have prepareAspectRatio and viewBox properties. 　<g> cannot have these two properties. Therefore, compared to using <g> elements within the <defs> element, the <symbol> element may be a better method for reusing shapes.