SVG symbol Element

The SVG <symbol> element defines the reusable symbols. The shapes which are nested inside a <symbol> are not displayed on the screen unless referenced by a <use> element.

Example

<!DOCTYPE html>
<html>
   <body>

<svg width="450" height="450">
    <symbol id="shape1">
        <circle cx="40" cy="40" r="40" />
    </symbol>

    <use xlink:href="#shape1" x="50" y="30" />
</svg>

</body>
</html>

Test it Now

Explanation

The id attribute of <symbol> defines a unique name of symbol.
The id attribute is needed by the <symbol> element so it can be referenced later by a <use> element.

Next TopicSVG Pattern

← prev next →