<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 `myCircle`.
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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. See Usage notes for details on common pitfalls.  
*Value type*: **`<URL>`** ; *Default value*: none; *Animatable*: **yes**

`xlink:href` 
Deprecated

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.  
*Value type*: **`<IRI>`** ; *Default value*: none; *Animatable*: **yes**

`x`

The x coordinate of an additional final offset transformation applied to the `<use>` element.  
*Value type*: **`<coordinate>`** ; *Default value*: `0`; *Animatable*: **yes**

`y`

The y coordinate of an additional final offset transformation applied to the `<use>` element.  
*Value type*: **`<coordinate>`** ; *Default value*: `0`; *Animatable*: **yes**

`width`

The width of the use element.  
*Value type*: **`<length>`** ; *Default value*: `0`; *Animatable*: **yes**

`height`

The height of the use element.  
*Value type*: **`<length>`** ; *Default value*: `0`; *Animatable*: **yes**


**Note:** `width`, and `height` have no effect on `use` elements, unless the element referenced has a viewBox - i.e. they only have an effect when `use` refers to a `svg` or `symbol` element.

**Note:** Starting with SVG2, `x`, `y`, `width`, and `height` are *Geometry Properties*, meaning those attributes can also be used as CSS properties for that element.

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

Styling Attributes
`class`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage`

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

ARIA Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

XLink Attributes
`xlink:href` 
Deprecated
, `xlink:title`
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, described later, 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.

**Warning:** Loading resources with data URIs in the `href` attribute is deprecated for security reasons.
 This applies to `<use href="data:...` and also when setting `href` by using the `set` or `setAttribute` method.
 See "Load from data: URI" in the Browser compatibility table to check support in different browser versions.


**Warning:** Since SVG 2, the `xlink:href` attribute is deprecated in favor of `href`. See `xlink:href` page for more information.

|  |  |
| --- | --- |
| Categories | Graphics element, Graphics referencing element, Structural element |
| Permitted content | Any number of the following elements, in any order:Animation elementsDescriptive elements |

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # UseElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.