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

Featured Videos

Java ForkJoinPool

P2P Networks Introduction


Java Persistence
Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Next tutorial in this tutorial trail