xlink:href

  • Revision slug: Web/SVG/Attribute/xlink:href
  • Revision title: xlink:href
  • Revision id: 426895
  • Created:
  • Creator: Jeremie
  • Is current revision? Yes
  • Comment 2 words added, 1 words removedMoved From SVG/Attribute/xlink:href to Web/SVG/Attribute/xlink:href

Revision Content

« SVG Attribute reference home

The xlink:href attribute basically define a link to a resource as a reference <IRI>. The exact meaning of that link depend on the context of each element using it, see above for more specific usage.

Usage context

Categories Xlink attribute
Value <IRI> | <funcIRI>
Animatable No (with some exceptions)
Normative document SVG 1.1 (2nd Edition): Animation elements
SVG 1.1 (2nd Edition): a element
SVG 1.1 (2nd Edition): altGlyph element
SVG 1.1 (2nd Edition): color-profile element
SVG 1.1 (2nd Edition): cursor element
SVG 1.1 (2nd Edition): feImage element
SVG 1.1 (2nd Edition): filter element
SVG 1.1 (2nd Edition): font-face-uri element
SVG 1.1 (2nd Edition): glyphRef element
SVG 1.1 (2nd Edition): image element
SVG 1.1 (2nd Edition): linearGradient element
SVG 1.1 (2nd Edition): mpath element
SVG 1.1 (2nd Edition): pattern element
SVG 1.1 (2nd Edition): radialGradient element
SVG 1.1 (2nd Edition): script element
SVG 1.1 (2nd Edition): textPath element
SVG 1.1 (2nd Edition): use element
SVG 1.1 (2nd Edition): tref element

{{ page("/en/SVG/Content_type","IRI") }}

Elements

The following elements can use the xlink:href attribute

Animation elements »
An <IRI> reference to the element which is the target of this animation and which therefore will be modified over time. The target element must be part of the current SVG document. If the xlink:href attribute is not provided, then the target element will be the immediate parent element of the current animation element.
Gradient elements »
An <IRI> reference to a different {{ SVGElement("linearGradient") }} or {{ SVGElement("radialGradient") }} element within the current SVG document. Any {{ SVGElement("linearGradient") }} or {{ SVGElement("linearGradient") }} attributes which are defined on the referenced element which are not defined on this element are inherited by this element if this element is of the same type as the referenced element. If this element has no defined gradient stops, and the referenced element does (possibly due to its own xlink:href attribute), then this element inherits the gradient stop from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attribute or gradient stops due to its own xlink:href attribute, then the current element can inherit those attributes or gradient stops. On the gradient elements, the xlink:href attribute is animatable.
{{ SVGElement("a") }}
The location of the referenced object, expressed as an <IRI> reference. On the {{ SVGElement("a") }} element, the xlink:href attribute is animatable.
{{ SVGElement("altGlyph") }}
An <IRI> reference either to a {{ SVGElement("glyph") }} element in an SVG document or to an {{ SVGElement("altGlyphDef") }} element.

If the reference is to a {{ SVGElement("glyph") }} element and that glyph is available, then that glyph is rendered instead of the character(s) that are inside of the {{ SVGElement("altGlyph") }} element.

If the reference is to an {{ SVGElement("altGlyphDef") }} element, then if an appropriate set of alternate glyphs is located from processing the {{ SVGElement("altGlyphDef") }} element, then those alternate glyphs are rendered instead of the character(s) that are inside of the {{ SVGElement("altGlyph") }} element.
{{ SVGElement("color-profile") }}
The location of an ICC profile resource.
{{ SVGElement("cursor") }}
A <funcIRI> reference to the file or element which provides the image of the cursor. On the {{ SVGElement("cursor") }} element, the xlink:href attribute is animatable.
{{ SVGElement("feImage") }}
An <IRI> reference to the image source. On the {{ SVGElement("feImage") }} element, the xlink:href attribute is animatable.
{{ SVGElement("filter") }}
An <IRI> reference to another {{ SVGElement("filter") }} element within the current SVG document. Any attributes which are defined on the referenced {{ SVGElement("filter") }} element which are not defined on this element are inherited by this element. If this element has no defined filter nodes, and the referenced element has defined filter nodes (possibly due to its own xlink:href attribute), then this element inherits the filter nodes defined from the referenced {{ SVGElement("filter") }} element. Inheritance can be indirect to an arbitrary level; thus, if the referenced {{ SVGElement("filter") }} element inherits attributes or its filter node specification due to its own xlink:href attribute, then the current element can inherit those attributes or filter node specifications. On the {{ SVGElement("filter") }} element, the xlink:href attribute is animatable.
{{ SVGElement("font-face-uri") }}
The xlink:href attribute specifies the location of the referenced font.
{{ SVGElement("glyphRef") }}
An <IRI> reference to a {{ SVGElement("glyph") }} element in an SVG document. The referenced {{ SVGElement("glyph") }} is rendered as an alternate glyph.
{{ SVGElement("image") }}
An <IRI> reference to the image source. On the {{ SVGElement("image") }} element, the xlink:href attribute is animatable.
{{ SVGElement("mpath") }}
An <IRI> reference to the {{ SVGElement("path") }} element which defines the motion path.
{{ SVGElement("pattern") }}
An <IRI> reference to a different {{ SVGElement("pattern") }} element within the current SVG document. Any attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no children, and the referenced element does (possibly due to its own xlink:href attribute), then this element inherits the children from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attributes or children due to its own xlink:href attribute, then the current element can inherit those attributes or children. On the {{ SVGElement("pattern") }} element, the xlink:href attribute is animatable.
{{ SVGElement("script") }}
An <IRI> reference to an external resource containing the script code.
{{ SVGElement("textPath") }}
An <IRI> reference to the {{ SVGElement("path") }} element onto which the text will be rendered. On the {{ SVGElement("textPath") }} element, the xlink:href attribute is animatable.
{{ SVGElement("use") }}
An <IRI> reference to an element/fragment within an SVG document. On the {{ SVGElement("use") }} element, the xlink:href attribute is animatable.
{{ SVGElement("tref") }}
An <IRI> reference to an element whose character data content shall be used as character data for this {{ SVGElement("tref") }} element. On the {{ SVGElement("tref") }} element, the xlink:href attribute is animatable.

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>xlink:href</code> attribute basically define a link to a resource as a reference <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a>. The exact meaning of that link depend on the context of each element using it, see above for more specific usage.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Xlink attribute</td> </tr> <tr> <th scope="row">Value</th> <td><a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> | <a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI">&lt;funcIRI&gt;</a></td> </tr> <tr> <th scope="row">Animatable</th> <td>No (<em>with some exceptions</em>)</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#HrefAttribute" title="http://www.w3.org/TR/SVG11/animate.html#HrefAttribute">SVG 1.1 (2nd Edition): Animation elements</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElementXLinkHrefAttribute" title="http://www.w3.org/TR/SVG11/linking.html#AElementXLinkHrefAttribute">SVG 1.1 (2nd Edition): a element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElementHrefAttribute" title="http://www.w3.org/TR/SVG11/text.html#AltGlyphElementHrefAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElementHrefAttribute" title="http://www.w3.org/TR/SVG11/color.html#ColorProfileElementHrefAttribute">SVG 1.1 (2nd Edition): color-profile element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElementHrefAttribute" title="http://www.w3.org/TR/SVG11/interact.html#CursorElementHrefAttribute">SVG 1.1 (2nd Edition): cursor element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElementHrefAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feImageElementHrefAttribute">SVG 1.1 (2nd Edition): feImage element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElementHrefAttribute" title="http://www.w3.org/TR/SVG11/filters.html#FilterElementHrefAttribute">SVG 1.1 (2nd Edition): filter element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceUriElementHrefAttribute" title="http://www.w3.org/TR/SVG11/fonts.html#FontFaceUriElementHrefAttribute">SVG 1.1 (2nd Edition): font-face-uri element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElementHrefAttribute" title="http://www.w3.org/TR/SVG11/text.html#GlyphRefElementHrefAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElementHrefAttribute" title="http://www.w3.org/TR/SVG11/struct.html#ImageElementHrefAttribute">SVG 1.1 (2nd Edition): image element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementHrefAttribute" title="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementHrefAttribute">SVG 1.1 (2nd Edition): linearGradient element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/animate.html#MPathElementHrefAttribute" title="http://www.w3.org/TR/SVG11/animate.html#MPathElementHrefAttribute">SVG 1.1 (2nd Edition): mpath element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElementHrefAttribute" title="http://www.w3.org/TR/SVG11/pservers.html#PatternElementHrefAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementHrefAttribute" title="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementHrefAttribute">SVG 1.1 (2nd Edition): radialGradient element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElementHrefAttribute" title="http://www.w3.org/TR/SVG11/script.html#ScriptElementHrefAttribute">SVG 1.1 (2nd Edition): script element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElementHrefAttribute" title="http://www.w3.org/TR/SVG11/text.html#TextPathElementHrefAttribute">SVG 1.1 (2nd Edition): textPath element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElementHrefAttribute" title="http://www.w3.org/TR/SVG11/struct.html#UseElementHrefAttribute">SVG 1.1 (2nd Edition): use element</a><br> <a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElementHrefAttribute" title="http://www.w3.org/TR/SVG11/text.html#TRefElementHrefAttribute">SVG 1.1 (2nd Edition): tref element</a></td> </tr> </tbody>
</table>
<p>{{ page("/en/SVG/Content_type","IRI") }}</p><h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>xlink:href</code> attribute</p>
<dl> <dt><a href="/en/SVG/Element#Animation_elements" title="en/SVG/Element#Animation_elements">Animation elements</a> »</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to the element which is the target of this animation and which therefore will be modified over time. The target element must be part of the current SVG document. If the <code>xlink:href</code> attribute is not provided, then the target element will be the immediate parent element of the current animation element.</dd> <dt><a href="/en/SVG/Element#Gradient_elements" title="en/SVG/Element#Gradient_elements">Gradient elements</a> »</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to a different {{ SVGElement("linearGradient") }} or {{ SVGElement("radialGradient") }} element within the current SVG document. Any {{ SVGElement("linearGradient") }} or {{ SVGElement("linearGradient") }} attributes which are defined on the referenced element which are not defined on this element are inherited by this element if this element is of the same type as the referenced element. If this element has no defined gradient stops, and the referenced element does (possibly due to its own <code>xlink:href</code> attribute), then this element inherits the gradient stop from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attribute or gradient stops due to its own <code>xlink:href</code> attribute, then the current element can inherit those attributes or gradient stops. On the gradient elements, the <code>xlink:href</code> attribute is animatable.</dd> <dt>{{ SVGElement("a") }}</dt> <dd>The location of the referenced object, expressed as an <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference. On the {{ SVGElement("a") }} element, the <code>xlink:href</code> attribute is animatable.</dd> <dt>{{ SVGElement("altGlyph") }}</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference either to a {{ SVGElement("glyph") }} element in an SVG document or to an {{ SVGElement("altGlyphDef") }} element.<br> <br> If the reference is to a {{ SVGElement("glyph") }} element and that glyph is available, then that glyph is rendered instead of the character(s) that are inside of the {{ SVGElement("altGlyph") }} element.<br> <br> If the reference is to an {{ SVGElement("altGlyphDef") }} element, then if an appropriate set of alternate glyphs is located from processing the {{ SVGElement("altGlyphDef") }} element, then those alternate glyphs are rendered instead of the character(s) that are inside of the {{ SVGElement("altGlyph") }} element.</dd> <dt>{{ SVGElement("color-profile") }}</dt> <dd>The location of an ICC profile resource.</dd> <dt>{{ SVGElement("cursor") }}</dt> <dd>A <a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI">&lt;funcIRI&gt;</a> reference to the file or element which provides the image of the cursor. On the {{ SVGElement("cursor") }} element, the <code>xlink:href</code> attribute is animatable.</dd> <dt>{{ SVGElement("feImage") }}</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to the image source. On the {{ SVGElement("feImage") }} element, the <code>xlink:href</code> attribute is animatable.</dd> <dt>{{ SVGElement("filter") }}</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to another {{ SVGElement("filter") }} element within the current SVG document. Any attributes which are defined on the referenced {{ SVGElement("filter") }} element which are not defined on this element are inherited by this element. If this element has no defined filter nodes, and the referenced element has defined filter nodes (possibly due to its own <code>xlink:href</code> attribute), then this element inherits the filter nodes defined from the referenced {{ SVGElement("filter") }} element. Inheritance can be indirect to an arbitrary level; thus, if the referenced {{ SVGElement("filter") }} element inherits attributes or its filter node specification due to its own <code>xlink:href</code> attribute, then the current element can inherit those attributes or filter node specifications. On the {{ SVGElement("filter") }} element, the <code>xlink:href</code> attribute is animatable.</dd> <dt>{{ SVGElement("font-face-uri") }}</dt> <dd>The <code>xlink:href</code> attribute specifies the location of the referenced font.</dd> <dt>{{ SVGElement("glyphRef") }}</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to a {{ SVGElement("glyph") }} element in an SVG document. The referenced {{ SVGElement("glyph") }} is rendered as an alternate glyph.</dd> <dt>{{ SVGElement("image") }}</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to the image source. On the {{ SVGElement("image") }} element, the <code>xlink:href</code> attribute is animatable.</dd> <dt>{{ SVGElement("mpath") }}</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to the {{ SVGElement("path") }} element which defines the motion path.</dd> <dt>{{ SVGElement("pattern") }}</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to a different {{ SVGElement("pattern") }} element within the current SVG document. Any attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no children, and the referenced element does (possibly due to its own <code>xlink:href</code> attribute), then this element inherits the children from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attributes or children due to its own <code>xlink:href</code> attribute, then the current element can inherit those attributes or children. On the {{ SVGElement("pattern") }} element, the <code>xlink:href</code> attribute is animatable.</dd> <dt>{{ SVGElement("script") }}</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to an external resource containing the script code.</dd> <dt>{{ SVGElement("textPath") }}</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to the {{ SVGElement("path") }} element onto which the text will be rendered. On the {{ SVGElement("textPath") }} element, the <code>xlink:href</code> attribute is animatable.</dd> <dt>{{ SVGElement("use") }}</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to an element/fragment within an SVG document. On the {{ SVGElement("use") }} element, the <code>xlink:href</code> attribute is animatable.</dd> <dt>{{ SVGElement("tref") }}</dt> <dd>An <a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a> reference to an element whose character data content shall be used as character data for this {{ SVGElement("tref") }} element. On the {{ SVGElement("tref") }} element, the <code>xlink:href</code> attribute is animatable.</dd>
</dl>
Revert to this revision