The <use> element takes nodes from within the SVG document, and duplicates them somewhere else.

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

The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, and then pasted where the use element is, much like cloned template elements in HTML5. Since the cloned nodes are not exposed, care must be taken when using CSS to style a use element and its hidden descendants. CSS attributes are not guaranteed to be inherited by the hidden, cloned DOM unless you explicitly request it using CSS inheritance.

For security reasons, some browsers could apply a same-origin policy on use elements and could refuse to load a cross-origin URI within the href attribute.

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

Attributes

href
This attribute defines the URL to element/fragment that needs to be duplicated.
Value type: <URL> ; Default value: none; Animatable: yes
x
This attribute defines the x coordinate of the use element.
Value type: <coordinate> ; Default value: 0; Animatable: yes
y
This attribute defines the y coordinate of the use element.
Value type: <coordinate> ; Default value: 0; Animatable: yes
width
This attribute determines the width of the use element.
Value type: <length> ; Default value: 0; Animatable: yes
height
This attribute determines the height of the use element.
Value type: <length> ; Default value: 0; Animatable: yes

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, xlink:title

Usage  notes

CategoriesGraphics element, Graphics referencing element, Structural element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<use>' in that specification.
Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<use>' in that specification.
Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support221241 Yes11.53
Load from external URI22134 No11.56.1
Load from data: URI22 Yes4 No11.55.1
href Yes Yes Yes Yes Yes No
xlink:href Yes Yes Yes Yes Yes Yes
x Yes Yes Yes Yes Yes Yes
y Yes Yes Yes Yes Yes Yes
height Yes Yes Yes Yes Yes Yes
width Yes Yes Yes Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4 Yes124111.53 ?
Load from external URI4.4 Yes13411.56.1 ?
Load from data: URI4 Yes Yes411.55.1 ?
href Yes Yes Yes Yes Yes Yes ?
xlink:href Yes Yes Yes Yes Yes Yes ?
x Yes Yes Yes Yes Yes Yes ?
y Yes Yes Yes Yes Yes Yes ?
height Yes Yes Yes Yes Yes Yes ?
width Yes Yes Yes Yes Yes Yes ?

1. For years, Firefox has suffered from a bug whereby it doesn't completely follow the use cascading rules (see bug 265894). A fix is documented by Amelia Bellamy-Royds on StackOverflow. The good news is that this is finally fixed as of Firefox 56.

Document Tags and Contributors

Last updated by: Jeremie,