href

« SVG attribute reference home

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.

Note: Specifications before SVG 2 defined an xlink:href attribute, which is now rendered obsolete by the href attribute.

Usage context

Categories	Xlink attribute
Value	URL
Animatable	Yes (except for animation elements)
Initial value	(None)

URL

A Unified Address Locator.

A URL is a sequence of Unicode characters building an address to an internal or external resource.

Before SVG 2 the more limited IRI content type was used instead, because the URL specification was not standardized before.

Elements

The following elements can use the href attribute:

Animation elements »

A URL reference to the element which is the target of this animation element and which therefore will be modified over time.

The URL must point to exactly one target element which is capable of being the target of the given animation element. If the URL points to multiple target elements, if the given target element is not capable of being a target of the given animation element, or if the given target element is not part of the current document, then the animation element will not affect any target element. However, the animation element will still operate normally with regard to its timing properties. Specifically, TimeEvents are dispatched and the animation element can be used as syncbase in an identical fashion to when the URL refers to a valid target element.

If the href attribute or the deprecated xlink:href attribute is not provided, then the target element will be the immediate parent element of the current animation element. If both xlink:href and href are specified, the value of the latter attribute is used.

Refer to the descriptions of the individual animation elements for any restrictions on what types of elements can be targets of particular types of animations.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: Specifying the animation target.

Gradient elements »

A URL reference to a different <linearGradient> or <radialGradient> element.

<a>

The location of the referenced object, expressed as a URL reference.

<cursor>

A URL reference to the file or element which provides the image of the cursor.

<discard>

A URL reference that identifies the target element to discard. See the definition of href on animation elements for details on identifying a target element. Note, however, that unlike other animation elements, the <discard> element does not support the deprecated xlink:href attribute.

Note that if the target element is not part of the current SVG document fragment, then whether the target element will be removed or not is defined by the host language.

If the href attribute is not provided, then the target element will be the immediate parent element of the <discard> element.

<feImage>

A URL to an image resource or to an element. If both, the xlink:href and the href attribute are specified, the latter overrides the former.

<hatch>

A URL reference to a template element, which must be a different <hatch> element to be valid.

The specified attributes that will be copied from the template are:

<image>

A URL reference identifying the image to render.

<mesh>

A URL reference to a <meshgradient> paint server.

<meshgradient>

A URL reference to a template element, which must be a different <meshgradient> element to be valid.

The specified attributes that will be copied from the template are:

<mpath>

A URL reference to the <path> element which defines the motion path.

<pattern>

A URL reference to a different <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 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 href attribute, then the current element can inherit those attributes or children. On the <pattern> element, the href attribute is animatable.

<script>

A URL reference to an external resource containing the script code.

<textPath>

A URL reference to the <path> element onto which the text will be rendered if no path attribute is provided. On the <textPath> element, the href attribute is animatable.

<use>

A URL reference to an element/fragment within an SVG document to be cloned.

The <use> element can reference an entire SVG document by specifying an href value without a fragment. Such references are taken to be referring to the root element of the referenced document.

Example

HTML

<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="https://www.w3.org/2000/svg">
  <image href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100"/>
</svg>

Result

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2 The definition of 'href for <a>' in that specification.	Candidate Recommendation	Defines `href` for the `<a>` element.
SVG Animations Level 2 The definition of 'href for <animate>, <animateMotion>, <animateTransform>, <set>' in that specification.	Editor's Draft	Defines `href` for animation elements.
Scalable Vector Graphics (SVG) 2 The definition of 'href for <cursor>' in that specification.	Candidate Recommendation	Defines `href` for the `<cursor>` element.
SVG Animations Level 2 The definition of 'href for <discard>' in that specification.	Editor's Draft	Defines `href` for the `<discard>` element.
Filter Effects Module Level 1 The definition of 'href for <feImage>' in that specification.	Candidate Recommendation	Defines `href` for the `<feImage>` element.
Scalable Vector Graphics (SVG) 2 The definition of 'href for <hatch>' in that specification.	Candidate Recommendation	Defines `href` for the `<hatch>` element.
Scalable Vector Graphics (SVG) 2 The definition of 'href for <image>' in that specification.	Candidate Recommendation	Defines `href` for the `<image>` element.
Scalable Vector Graphics (SVG) 2 The definition of 'href for <linearGradient>' in that specification.	Candidate Recommendation	Defines `href` for the `<linearGradient>` element.
Scalable Vector Graphics (SVG) 2 The definition of 'href for <mesh>' in that specification.	Candidate Recommendation	Defines `href` for the `<mesh>` element.
Scalable Vector Graphics (SVG) 2 The definition of 'href for <meshgradient>' in that specification.	Candidate Recommendation	Defines `href` for the `<meshgradient>` element.
SVG Animations Level 2 The definition of 'href for <mpath>' in that specification.	Editor's Draft	Defines `href` for the `<mpath>` element.
Scalable Vector Graphics (SVG) 2 The definition of 'href for <pattern>' in that specification.	Candidate Recommendation	Defines `href` for the `<pattern>` element.
Scalable Vector Graphics (SVG) 2 The definition of 'href for <radialGradient>' in that specification.	Candidate Recommendation	Defines `href` for the `<radialGradient>` element.
Scalable Vector Graphics (SVG) 2 The definition of 'href for <script>' in that specification.	Candidate Recommendation	Defines `href` for the `<script>` element.
Scalable Vector Graphics (SVG) 2 The definition of 'href for <textPath>' in that specification.	Candidate Recommendation	Defines `href` for the `<textPath>` element.
Scalable Vector Graphics (SVG) 2 The definition of 'href for <use>' in that specification.	Candidate Recommendation	Defines `href` for the `<use>` element.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	(Yes)	51.0 (51.0)	(Yes)	(Yes)	(Yes)	?

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	51.0 (51.0)	?	?	?