<a>

The <a> SVG element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML's <a> element.

SVG's <a> element is a container, which means you can create a link around text (like in HTML) but also around any shape.

Example

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- A link around a shape -->
  <a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35" />
  </a>

  <!-- A link around a text -->
  <a href="/docs/Web/SVG/Element/text">
    <text x="50" y="90" text-anchor="middle">&lt;circle&gt;</text>
  </a>
</svg>
css
/* As SVG does not provide a default visual style for links,
   it's considered best practice to add some */

@namespace svg url(http://www.w3.org/2000/svg);
/* Necessary to select only SVG <a> elements, and not also HTML's.
   See warning below */

svg|a:link,
svg|a:visited {
  cursor: pointer;
}

svg|a text,
text svg|a {
  fill: blue; /* Even for text, SVG uses fill over color */
  text-decoration: underline;
}

svg|a:hover,
svg|a:active {
  outline: dotted 1px blue;
}

Warning: Since this element shares its tag name with HTML's <a> element, selecting a with CSS or querySelector may apply to the wrong kind of element. Try the @namespace rule to distinguish the two.

Attributes

download

Instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. Value type: <string> ; Default value: none; Animatable: no

href

The URL or URL fragment the hyperlink points to. Value type: <URL> ; Default value: none; Animatable: yes

hreflang

The human language of the URL or URL fragment that the hyperlink points to. Value type: <string> ; Default value: none; Animatable: yes

ping

A space-separated list of URLs to which, when the hyperlink is followed, POST requests with the body PING will be sent by the browser (in the background). Typically used for tracking. For a more widely-supported feature addressing the same use cases, see Navigator.sendBeacon(). Value type: <list-of-URLs> ; Default value: none; Animatable: no

referrerpolicy

Which referrer to send when fetching the URL. Value type: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Default value: none; Animatable: no

rel

The relationship of the target object to the link object. Value type: <list-of-Link-Types> ; Default value: none; Animatable: yes

target

Where to display the linked URL. Value type: _self|_parent|_top|_blank|<name> ; Default value: _self; Animatable: yes

type

A MIME type for the linked URL. Value type: <string> ; Default value: none; Animatable: yes

xlink:href

The URL or URL fragment that the hyperlink points to. May be required for backwards compatibility for older browsers. Value type: <URL> ; Default value: none; Animatable: yes

Usage context

Categories Container element
Permitted content Any number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
Structural elements
Gradient elements
<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# Links

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
a 1 12 1.5 9 3.1 18 4 14 2 1.0 3
download No No 20 No No No 20 No No No No
href 50 12 51 37 12.1 50 51 37 12.2 5.0 50
hreflang No ≤18–79 61 No No No 61 No No No No
ping No No
61This property is exposed but has no effect if the browser.send_pings preference is not set to true. See bug 951104.
 No No No
61This property is exposed but has no effect if the browser.send_pings preference is not set to true. See bug 951104.
 No No No No
referrerpolicy 51 79 52 38 14 51 52 41 14 7.2 51
rel No ≤18–79 61 No 14 No 61 No 14 No No
systemLanguage 1 12 12 9 3.1 18 14 14 2 1.0 3
target 1 12 1.5 9 3.1 18 4 14 2 1.0 3
type No ≤18–79 61 No No No 61 No No No No
xlink_actuate 1 79 1.5 15 3.1 18 4 14 2 1.0 4.4
xlink_href 1 12 1.5 9 3.1 18 4 14 2 1.0 3
xlink_show 1 79 1.5 15 3.1 18 4 14 2 1.0 4.4
xlink_title 1 79 1.5 15 3.1 18 4 14 2 1.0 4.4

See also

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