SVG <use> Element

The SVG <use> element can reuse SVG shapes from other locations in the SVG document (including <g> elements and <symbol> elements). Reusable shapes can be defined within or outside the <defs> element (making the shape invisible until it is used).

use example

This is a simple example of the <use> element:

<svg　width="500"　height="100">
　　　　<defs>
　　　　　　　　<g id="shape">
　　　　　　　　　　　　<rect　x="0"　y="0"　width="50"　height="50" ></rect>
　　　　　　　　　　　　<circle cx="0" cy="0" r="50" ></circle>
　　　　　　　　</g>
　　　　</defs>
　　　　<use xlink:href="#shape" x="50"　y="50" ></use>
　　　　<use xlink:href="#shape" x="200"　y="50" ></use>
　　　　<circle cx="50" cy="50" r="5" style="fill:#0000ff;"></circle>
　　　　<circle cx="200" cy="50" r="5" style="fill:#0000ff;"></circle>
</svg>

This example shows the <g> element defined within the <defs> element. This makes the <g> element invisible unless referenced by a <use> element.

Before referencing the <g> element, it must be set with an ID through its ID attribute. The <use> element does so through its xlink:href attribute. Note the '#' before the ID value.

The <use> element specifies where to display the reused shape through its x and y attributes. Please note that the shapes inside the <g> element are located at 0,0. This is because their positions are added to the location specified by the <use> element.

Image effect after running:

The blue dot is not part of the example. It is added to show the x and y of the two <use> elements.

Using shapes outside of the <defs> element

The <use> element can reuse any positioned element in an SVG image as long as the shape has a unique id attribute. Here is an example:

<svg　width="500"　height="110">　　　　
<g　id="shape2">　　　　
<rect　x="0"　y="0"　width="50"　height="50"　/>　　　　
</g>　　　　
<use　xlink:href="#shape2"　x="200"　y="50"　/>　　　　
<circle cx="200" cy="50" r="5" style="fill:#0000ff;"/>　　　　
</svg>

In this example, a <g> element containing a <rect> element is defined. Then, it is reused by the <use> element (including the nested <rect> element).

Image effect after running:

Please note that both the original shape and its reused version are displayed. This happens because the shape to be reused (the <g> element) is not defined within the <defs> element or <symbol> element. Therefore, it is visible.

Similarly, blue dots display the coordinates of the <use> element.

Set CSS styles

If no CSS styles are set on the original shape, CSS styles can be set when reusing the shape. You simply need to specify the styles to be set within the style attribute of the <use> element. Here is an example:

<svg　width="500"　height="110">
　　<g　id="shape3">
　　　　　　<rect　x="0"　y="0"　width="50"　height="50"　/>
　　</g>
　　<use　xlink:href="#shape3"　x="100"　y="50"　style="fill:　#00ff00;"/>
　　<use　xlink:href="#shape3"　x="200"　y="50"　style="stroke:　#00ff00;　fill:　none;"/>
</svg>

Note that no style attribute is set on the original shape. Then it will be rendered using the default style (usually black).