Tech and Media Labs
This site uses cookies to improve the user experience.

SVG symbol Element

Jakob Jenkov
Last update: 2014-06-15

The SVG <symbol> element is used to define reusable symbols. The shapes nested inside a <symbol> are not displayed unless referenced by a <use> element.

A symbol Example

Here is a simple symbol example:

<svg width="500" height="100">
    <symbol id="shape2">
        <circle cx="25" cy="25" r="25" />

    <use xlink:href="#shape2" x="50" y="25" />

The <symbol> element needs an id attribute so it can be referenced later by a <use> element.

preserveAspectRatio and viewBox

A <symbol> element can have a preserveAspectRatio and viewBox attribute. A <g> cannot have these two attributes. Therefore the <symbol> element is probably a better way to reuse shapes than by using a <g> element inside the <defs> element.

Jakob Jenkov

Copyright  Jenkov Aps
Close TOC