W3cubDocs

/SVG

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

<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.
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:href, 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: 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 elements
Descriptive elements

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
use 22 12
4Before version 56, Firefox does not completely follow the use cascading rules (see bug 265894). A fix is documented by Amelia Bellamy-Royds on StackOverflow.
Yes 11.5 3 4 Yes
4Before version 56, Firefox does not completely follow the use cascading rules (see bug 265894). A fix is documented by Amelia Bellamy-Royds on StackOverflow.
11.5 3 Yes
data_uri 22 ≤18 4 No 11.5 5.1 4 Yes 4 11.5 5 Yes
external_uri 22 13 4 No 11.5 7 4.4 Yes 4 11.5 7 Yes
height Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
href 50 12 Yes Yes 37 12.1 50 50 Yes 37 12.2 5.0
width Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
x Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
xlink_href Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
y Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use