The element is used to define graphical templates 　　which can be instantiated by a element but which are not rendered 　　directly. 　　A establishes a nested coordinate system 　　for the graphics it contains. 　　When a symbol is instantiated 　　as the referenced element of a element, 　　it is therefore rendered very similarly to a nested element. 　　The , , , and geometry properties 　　have the same effect as on an element, 　　when the is instantiated by a element. 　　In particular, if and 　　compute to 　　(and are not over-ridden by values on the instantiating element), 　　then they will be treated as a value of . 　　The use of elements for graphics that are used multiple 　　times in the same document adds structure and semantics. 　　Closely related to the element are the 　　and elements; 　　all three define a container of graphical content 　　that can be rendered repeatedly at various positions and scales in the SVG. 　　However, while re-used graphics in a pattern and marker 　　provide a graphical effect on another element, 　　the content in a will be embedded 　　as fully interactive content, within a use-element shadow tree. 　　The user agent style sheet sets 　　the property for elements to 　　, which causes a rectangular clipping 　　path to be created at the bounds of symbol's SVG viewport. Unless the 　　property is overridden, any graphics within the symbol which 　　goes outside of the symbol's SVG viewport will be clipped. 　　elements must never be rendered directly; 　　their only usage is as something that can be referenced 　　using the element. 　　The user agent must set the 　　property on the element 　　to , 　　as part of the user agent style sheet, 　　and this declaration must have importance over any other CSS rule or presentation attribute. 　　The generated instance of a 　　that is the direct referenced element of a element 　　must always have a computed value of 　　for the property. 　　In other words, it must be rendered whenever the host element is rendered. 　　The user agent style sheet again defines this 　　declaration to have importance over any other CSS rule or presentation attribute. 　　Any other that is cloned 　　to create an element instance 　　within the use-element shadow tree 　　behaves as a symbol definition, and must not be rendered. 　　The element 　　references another element, a copy of which 　　is rendered in place of the in the document. 　　The referenced element may be a container element, 　　in which case a copy of 　　the complete SVG document subtree rooted at that element is used. 　　The cloned content inherits styles from the element 　　and can be the target of user events. 　　However, these cloned element instances remain linked to the referenced source 　　and reflect DOM mutations in the original. 　　In addition, all style rules that apply in the scope of the referenced element 　　also apply in the scope of the cloned shadow tree. 　　The , , and 　　geometric properties specify the positioning of the referenced element. 　　The and attributes 　　only have an effect if the referenced element 　　defines a viewport (i.e., if it is a or ); 　　if so, a value other than 　　for the element overrides the value 　　of the corresponding geometric property on that element. 　　A negative value for or 　　must be treated as an illegal value. 　　If or is zero, 　　and the properties have an effect on the referenced element, 　　then rendering of that element will be disabled. 　　User agents may restrict external resource documents for security 　　reasons. In particular, this specification does not allow cross-origin resource requests in . 　　A future version of this or another specification may provide a method of securely enabling cross-origin re-use 　　of assets. 　　When the attribute is set 　　(or, in the absence of an attribute, an attribute), 　　the user agent must process the URL. 　　The target element that results from URL processing is the referenced element of the . 　　If the referenced element that results from resolving the URL 　　is neither an SVG element 　　nor an HTML-namespaced element 　　that may be included as a child of an SVG container element, 　　then the reference is invalid and the element is in error. 　　If the referenced element is a (shadow-including) ancestor 　　of the element, 　　then this is an invalid circular reference 　　and the element is in error. 　　Otherwise, the user agent must generate a shadow tree 　　of re-used graphics to render as the contents of the element, 　　as described in the next section, The use-element shadow tree. 　　A that has an unresolved or invalid URL reference 　　is not rendered. 　　For the purpose of bounding box calculations, 　　it is equivalent to an empty container element. 　　The re-used graphics generated by a element 　　are defined in terms of a shadow tree. 　　In terms of interactivity and style inheritance, 　　they are therefore quite different from other types of re-used graphics in SVG, 　　such as and content. 　　Elements in the shadow tree are rendered as if 　　the element was a container and they were its children. 　　However, the SVG Document Object Model (DOM) only contains 　　the element and its attributes. 　　The SVG DOM does not include the 　　element instances as children of the element. 　　User agents that support scripting and the document object model 　　must implement the use-element shadow tree as described in this section 　　and in conformance with the dom specification [dom], 　　or its future replacement. 　　In contrast, user agents that do not support 　　the dynamic interactive processing mode 　　may not need to implement all the details of the shadow DOM. 　　However, all user agents must ensure that the layout 　　and style inheritance for the re-used graphics, 　　and any multimedia 　　and declarative animations if applicable, 　　are rendered in the same way as if the shadow DOM was implemented. 　　The following definitions apply when discussing elements 　　and their shadow trees: 　　referenced element 　　The element specified by the (or ) attribute on the element, or the root element of a document referenced by that attribute if the URL provided does not include a target fragment that links to a specific element . 　　referenced document subtree 　　referenced graphics 　　The referenced element, and all of its descendent nodes. 　　shadow root 　　A object, 　　a type of node which is associated with a host , 　　and which contains the content that will be used to render that host. 　　A shadow root should be implemented in conformance with the dom specification [dom], 　　or its future replacement. 　　shadow host 　　host 　　An element that has an associated shadow root; 　　usage is consistent the definition of host in the DOM standard. 　　shadow tree 　　A node tree whose root is a shadow root; 　　usage is consistent the definition of shadow tree in the DOM standard. 　　use-element shadow tree 　　A shadow tree whose host is a element, 　　which contains element instances generated by cloning the referenced graphics. 　　element instance 　　instance 　　An element in the use-element shadow tree, 　　which is generated by cloning a corresponding element in the referenced document subtree. 　　instance root 　　The element instance for the referenced element; 　　it is always a direct child of the element's shadow root. 　　corresponding element 　　For each element instance, 　　the element in the referenced document subtree from which it is cloned. 　　corresponding use element 　　For each element instance, 　　the element which causes it to be rendered in the document. 　　This is the instance's shadow root's host element 　　if that element is not itself an element instance within a element shadow tree, 　　or is that element's corresponding use element otherwise, 　　recursively exiting shadow trees as many times as necessary 　　to reach a element that was not itself generated 　　as part of the shadow tree of another element. 　　When the user agent successfully resolves a element 　　to identify a referenced element, 　　the user agent must create a 　　use-element shadow tree whose host is the element itself. 　　The shadow tree must be created even if 　　the element is not rendered 　　because it is a descendent of a never-rendered element, 　　because of conditional processing, 　　or because of the property being set to 　　on it or an ancestor element. 　　Each node in the shadow tree is an instance of a corresponding node 　　from the referenced document subtree. 　　The shadow nodes all descend from the instance root, 　　which is the instance of the referenced element, 　　and which itself is a direct child of the shadow root node. 　　The shadow tree is open (inspectable by script), but read-only. 　　Any attempt to directly modify the elements, attributes, and other nodes in the shadow tree 　　must throw a . 　　Within a use-element shadow tree, 　　elements are inert (do not execute); 　　and elements 　　are subject to the limitations specified in the Multimedia section. 　　If the referenced element is in an external file, 　　then all URL references in attributes and style properties 　　must be made absolute as described in Generating the absolute URL, 　　before copying the value to the element instances. 　　The shadow tree itself uses the same document base URL 　　as the document that includes it. 　　The user agent must ensure that 　　all mutations to the referenced document subtree are reflected in the shadow tree. 　　This includes changes to elements, attributes, and text and other nodes. 　　In addition, changes to the stylesheets in effect for the referenced graphics 　　must be reflected in changes to the stylesheets in the shadow tree's scope, 　　as described futher in the section on style inheritance. 　　If either the element or the referenced element is altered 　　in a way that causes the element's URL reference to become unresolved again, 　　then the entire shadow tree for that use element is discarded. 　　When a references 　　another element which is another or whose content contains a 　　element, then the shadow DOM 　　cloning approach described above is recursive. However, a set 　　of references that directly or indirectly reference a element 　　to create a circular dependency is an invalid circular reference. 　　The element or element instance 　　whose shadow tree would create the circular reference 　　is in error and must not be rendered by the user agent. 　　The value of the , , and properties 　　on a element 　　are used to position the re-used graphics 　　and to set the viewport size 　　if the referenced element defines a nested viewport. 　　The effect of these properties on a element 　　is notably different from their effect on a graphics element, 　　or from their effect in CSS box layout. 　　The and properties define 　　an additional transformation 　　(, 　　where 　　and represent the computed value of the corresponding property) 　　to be applied to the element, 　　after any transformations specified with other properties 　　(i.e., appended to the right-side of the transformation list). 　　The and properties 　　on the element 　　override the values for the corresponding properties 　　on a referenced or element 　　when determining the used value for that property on the instance root element. 　　However, if the computed value for the property on the element is , 　　then the property is computed as normal for the element instance. 　　These properties can therefore be used to scale a graphic 　　that defines its own coordinate system, 　　each time it is re-used. 　　Because is the initial value, 　　if dimensions are not explicitly set on the element, 　　the values set on the or will be used as defaults. 　　The and properties 　　on the element have no effect 　　if the referenced element does not 　　establish a new viewport. 　　In particular, the element does not itself establish a new viewport, 　　and therefore does not affect the interpretation of percentages in the re-used graphics. 　　In all other ways, 　　rendering and layout of elements within the 　　use-element shadow tree 　　occurs as if the element was a container for its shadow content. 　　In particular, unless elements within the shadow tree establish a new viewport, 　　they must be drawn in the coordinate system in which the element is defined 　　(including any cumulative transformations). 　　This affects the interpretation of percentage lengths, 　　and also graphical effects with units. 　　The use-element shadow tree, like other shadow trees, 　　exhibits style encapsulation, 　　as defined in the CSS Scoping module [css-scoping-1]. 　　This means that elements in the shadow tree inherit styles 　　from its host element, 　　but that style rules defined in the outer document 　　do not match the elements in the shadow tree. 　　Instead, the shadow tree maintains its own list of stylesheets, 　　whose CSS rules are matched against elements in the shadow tree. 　　When the referenced element 　　is from the same document as the element, 　　the same document stylesheets will apply in 　　both the original document and the shadow tree document fragment. 　　Any changes to the stylesheets in the main document 　　also affect the shadow tree; 　　the object accessed through the 　　document and shadow root document fragment's 　　properties must be identical. 　　If a element is duplicated 　　as part of the referenced document subtree, 　　then the property on the element instance 　　points to the same object as for the corresponding element. 　　When the referenced element 　　is from an external document, 　　the stylesheet objects generated when processing that document 　　apply to the shadow tree, and are read-only. 　　All URL references in the stylesheet, 　　including fragment-only references, 　　must be made absolute, relative to the URL of the document 　　that contains the referenced element. 　　User agents may re-use the same stylesheet objects for any shadow trees 　　that reference that same external document. 　　Style rules that are scoped to the shadow tree 　　cannot normally affect any elements in the main document. 　　Similarly, style rules in the main document can only 　　affect the shadow tree elements by changing inherited values. 　　However, CSS Scoping 　　defines special selectors for styling the host element from within the shadow tree, 　　or for adjusting styles within the shadow tree 　　in response to changes in the host's context 　　[css-scoping-1]. 　　CSS media queries within a shadow tree's scope 　　are evaluated using the same device features and dimensions 　　as the corresponding "light" document 　　(that is, the document that contains the corresponding use element 　　for the shadow tree, after recursively exiting all nested shadow trees). 　　When a use-element shadow tree includes 　　or elements, 　　the following behaviors must be enforced: 　　The user agent must synchronize playback of the media 　　with the corresponding element 　　(if it is rendered as part of the same document) 　　and any other instances of the same corresponding element 　　in the document. 　　The instance must not play any audio 　　if the element is not rendered. 　　If user-agent provided playback controls are included 　　for the corresponding element 　　(or would be included, if the element was rendered), 　　then they must be included for all instances in the document, 　　and a user action on any instance must control playback on them all. 　　The Web Animations API 　　[web-animations-1] 　　and the SVG Animations specification 　　[svg-animation] 　　define non-CSS ways to animate attributes and styles 　　on targetted elements without directly manipulating DOM properties 　　(see the Animation appendix for details). 　　User agents that implement those features 　　must ensure that all animations 　　that apply to an element in a referenced document subtree 　　also apply to instances of that element 　　in a use-element shadow tree, 　　as described in this section. 　　All animations within a use-element shadow tree 　　operate in the same document timeline as for the 　　corresponding use element, 　　regardless of whether the referenced element 　　is from the same or an external document. 　　For animation effects applied 　　using a Web Animations API method 　　[web-animations-1], 　　if the target of the animation is a corresponding element 　　to an element instance in a shadow tree, 　　the user agent must construct a 　　whose source is that object 　　and whose target is the element instance. 　　If there are multiple instances of the element in different trees, 　　then there will be multiple shadow animations, one for each. 　　The user agent must create such a 　　for all Web Animations API animations in effect 　　(including pending and frozen animations) 　　at the time the shadow tree is generated, 　　and for any new animations applied while the shadow tree exists. 　　The user agent must not create objects 　　for CSS animations or animation elements 　　(as these are duplicated separately). 　　Any attempts to directly apply new animations 　　to a target that is a read-only element instance (or pseudo-element) 　　within a use-element shadow tree 　　must throw a . 　　For each animation element [svg-animation] 　　that targets an element in the 　　referenced document subtree, 　　the user agent must ensure that an equivalent animation element 　　is in effect in the use-element shadow tree. 　　If the animation element itself is part of the referenced document subtree, 　　then this happens as a matter of course through the creation 　　of an element instance for the animation element. 　　Otherwise, the user agent must generate an element instance 　　for the animation element 　　that has the same effect as if it was a node in the shadow tree. 　　The effective document order for these generated animation elements 　　must be the same as the document order for their corresponding elements. 　　Each animation element or instance must only affect a target element 　　in the same node tree (shadow or light), 　　regardless of whether the targetting is implicit (the parent element) 　　or explicit (a URL cross-reference to an element ). 　　In this way, the one-to-one relationship between animation elements 　　and target elements is preserved. 　　All animation elements, in the document or in the shadow trees, 　　which are timed to begin or end in response to an event 　　on another element identified by its attribute, 　　must also begin or end when any instance of an element with that 　　receives the same event. 　　This is consistent with how event listeners on a 　　referenced element also listen to events on instances of that element, 　　as described in the section on 　　Event handling in use-element shadow trees. 　　This behavior does not apply to animation begin or end times 　　defined only by an event and not by an 　　(and therefore implicitly listening for the event on the target element); 　　in that case, each animation element is only triggered by its own target. 　　At the time an instance of an animation element 　　is generated within a shadow tree, 　　if there is an active animation associated with the corresponding element 　　(including a frozen animation), 　　and the timing event that initiated that animation would also have initiated the instance if it existed, 　　then the animation for the element instance must be initiated, 　　with its begin time 　　adjusted backwards in the document timeline 　　to match the timing of the corresponding element. 　　Element in a use-element shadow tree 　　can both listen for and be the target of DOM events. 　　Event retargetting provides encapsulation, 　　so that the details of the shadow DOM structure 　　are masked when an event bubbles out of the shadow tree and into the light. 　　Any event listeners defined on an element 　　in the referenced graphics 　　must also listen for the same event, at the same capture phase, 　　on each instance of that element in a use-element shadow tree. 　　This includes event listeners assigned using event attributes 　　(which would be duplicated as with any other DOM attribute) 　　and also event listeners assigned using the method. 　　The user agent must ensure that the list of event listeners 　　for each element instance is synchronized to match 　　its corresponding element. 　　An event listener cannot be directly assigned 　　to a read-only element instance in a use-element shadow tree. 　　Any attempt to add an event listener to such an element 　　must throw a . 　　Events in the use-element shadow tree 　　are dispatched and bubble according to the shadow tree 　　event path and event retargeting algorithm [DOM].