SVG: Using them Elemnts through use

The <use> element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, then pasted where the use element is, much like cloned template elements.

Example

The following example shows how to use the use element to draw a circle with a different fill and stroke color. In the last circle, stroke="red" will be ignored because stroke was already set on circle with id = myCircle.

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
</svg>

Attributes

href

The URL to an element/fragment that needs to be duplicated.

xlink:href

An <IRI> reference to an element/fragment that needs to be duplicated. If both href and xlink:href are present, the value given by href is used.

x

The x coordinate of an additional final offset transformation applied to the <use> element. Default value: 0.

y

The y coordinate of an additional final offset transformation applied to the <use> element. Default value: 0.

width

The width of the use element. Default value: 0.

height

The width of the use element. Default value: 0.

Usage notes

Most attributes on <use> are ignored if the corresponding attribute is already defined on the element referenced by <use>. (This differs from how CSS style attributes override those set earlier in the cascade). Only the attributes x, y, width, height and href on the <use> element will or may have some effect if the referenced element has already defined the corresponding attribute.

However, any other attributes not set on the referenced element will be applied to the use element.

Since the cloned nodes are not exposed, care must be taken when using CSS to style a use element and its cloned descendants. CSS properties are not guaranteed to be inherited by the cloned DOM unless you explicitly request them using CSS inheritance.

For security reasons, browsers may apply the same-origin policy on use elements and may refuse to load a cross-origin URL in the href attribute. There is currently no defined way to set a cross-origin policy for use elements.