<use>

Questo contenuto viene visualizzato in inglese perché non è ancora disponibile una versione tradotta nella lingua selezionata. Aiutaci a tradurre questo articolo!

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" stroke="blue"/>
  <use href="#myCircle" x="10" fill="blue"/>
  <use href="#myCircle" x="20" fill="white" stroke="red"/>
  <!--
stroke="red" will be ignored here, as stroke was already set on myCircle. 
Most attributes (except for x, y, width, height and (xlink:)href)
do not override those set in the ancestor.
That's why the circles have different x positions, but the same stroke value.
  -->
</svg>

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

Most attributes on use do not override those already on the element referenced by use. (This differs from how CSS style attributes override those set 'earlier' in the cascade). Only the attributes xywidthheight and href on the use element will override those set on the referenced element. 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 could apply the same-origin policy on use elements and could refuse to load a cross-origin URL in the href attribute.

Since SVG 2, the xlink:href attribute is deprecated in favor of href. See xlink:href page for more information. However, xlink:href can still be required in practice for cross-browser compatibility (see the compatibility table below).

Attributes

href
The URL to an element/fragment that needs to be duplicated.
Value type: <URL> ; Default value: none; Animatable: yes
xlink:href

Deprecated since SVG 2
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

An <IRI> reference to an element/fragment that needs to be duplicated.
Value type: <IRI> ; Default value: none; Animatable: yes
x
The x coordinate of the use element.
Value type: <coordinate> ; Default value: 0; Animatable: yes
y
The y coordinate of 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: 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
useChrome Full support 22Edge Full support 12Firefox Full support 4
Notes
Full support 4
Notes
Notes 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.
IE Full support YesOpera Full support 11.5Safari Full support 3WebView Android Full support 4Chrome Android Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes 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.
Opera Android Full support 11.5Safari iOS Full support 3Samsung Internet Android ?
Load from data: URIChrome Full support 22Edge Full support YesFirefox Full support 4IE No support NoOpera Full support 11.5Safari Full support 5.1WebView Android Full support 4Chrome Android Full support YesFirefox Android Full support 4Opera Android Full support 11.5Safari iOS Full support 5.1Samsung Internet Android ?
Load from external URIChrome Full support 22Edge Full support 13Firefox Full support 4IE No support NoOpera Full support 11.5Safari Full support 6.1WebView Android Full support 4.4Chrome Android Full support YesFirefox Android Full support 4Opera Android Full support 11.5Safari iOS Full support 6.1Samsung Internet Android ?
heightChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
hrefChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support 9WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 9Samsung Internet Android ?
widthChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
xChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
xlink:href
Deprecated
Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
yChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.