SVG use Element

Jakob Jenkov
Last update: 2014-06-15

The SVG <use> element can reuse an SVG shape from elsewhere in the SVG document, including <g> elements and <symbol> elements. The reused shape can be defined inside the <defs> element (which makes the shape invisible until used) or outside.

A use Example

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

<svg>
  <defs>
    <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />

</svg>

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

Before the <g> element can be referenced, it must have an ID set on it via its id attribute. The <use> element references the <g> element via its xlink:href attribute. Notice the # in front of the ID in the attribute value.

The <use> element specifies where to show the reused shapes via its x and y attributes. Notice that the shapes inside the <g> element are located at 0,0. That is done because their position is added to the position specified in the <use> element.

Here is the resulting image:

The blue dots are not part of the example. They are added to show the x and y of the two <use> elements.

Using Shapes Outside of a defs Element

The <use> element can reuse elements from anywhere in an SVG image as long as that shape has an id attribute with a unique value. 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" />

</svg>

This example defines a <g> element with a <rect> element inside. Then it reuses the <g> element (including the nested <rect> element) via a <use> element.

Here is the resulting image:

Notice that both the original shape and its reused version are shown. That is happening because the shape that is reused (the <g> element) is not defined inside the <defs> element or <symbol> element. Therefore it is visible.

Again, the blue dot shows the coordinates of the <use> element.

Setting CSS Styles

You can set the CSS styles when reusing a shape, if the original shape has no CSS style set on it. You simply specify the styles to set inside 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>

Notice how the original shape has no style attribute set on it. It will then be rendered with default styles (typically black).

Jakob Jenkov

Featured Videos

Java ForkJoinPool

P2P Networks Introduction




















Advertisements

High-Performance
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
Previous
Next tutorial in this tutorial trail
Next