SVG defs, use, symbol: reusable shapes and instances

SVG has its own approach to avoiding redundant geometry: the <use> element. It allows you to reuse graphics that you’ve already defined once in your file, to draw the same geometry in multiple places.

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="320px" width="140px">
    <title xml:lang="en">Re-usable Lights Spotlight</title>
    <defs>
        <circle id="light" cx="70" r="30" />
    </defs>
    <rect x="20" y="20" width="100" height="280" fill="blue" stroke="black" stroke-width="3" />
    <g stroke="black" stroke-width="2">
        <use xlink:href="#light" y="80" fill="red" />
        <use xlink:href="#light" y="160" fill="yellow" />
        <use xlink:href="#light" y="240" fill="#40cc40" />
    </g>
</svg>

xlink namespace

The xmlns:xlink attribute defines a second XML namespace, "http://www.w3.org/1999/xlink", which will be identified by the xlink prefix. XLink was a W3C standard for defining relationships between XML elements or files. The xlink:href attribute is fundamental to many SVG elements in SVG 1, and other XLink attributes were also adopted to describe hyperlinks. However, XLink isn’t really used anywhere else on the web other than SVG, so the namespace and attributes have been deprecated. When browsers fully support SVG 2, you’ll be able to use the href attribute without any namespace.

Because a standalone SVG file is XML, you could use any prefix you choose to represent the XLink namespace; all that matters is the "http://www.w3.org/1999/xlink" namespace URL. However, when you use SVG within HTML files—which don’t support XML namespaces—only the standard xlink:href attribute name will be recognized.

<defs> element

The next new feature is the <defs> element, which contains definitions of SVG content for later use. Children of a <defs> element are never drawn directly.

<defs>
    <circle id="light" cx="70" r="30" />
</defs>

<use> element

<use xlink:href="#light" y="80" fill="red" />

The element referenced by <use> doesn’t have to be inside a <defs>: it could also be a shape that was drawn directly.