W3cubDocs

/SVG

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

<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>
/* 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;
}

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 Deprecated since SVG 2
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

Global attributes

Core Attributes
Most notably: id, lang, tabindex
Styling Attributes
class, style
Conditional Processing Attributes
Most notably: requiredExtensions, systemLanguage
Event Attributes
Global event attributes, Document element 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
XLink Attributes
Most notably: xlink:title
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

Usage notes

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
a 1 12 1.5 9 9 3.1
download ? ? Yes ? ? ?
href Yes 12 51 Yes Yes 12.1
hreflang No ≤18 — 79 61 No No No
ping No ≤18 — 79 61 No No No
referrerPolicy 51 79 52 No 38 11.1
rel No ≤18 — 79 61 No No No
target 1 12 1.5 9 9 3.1
type No ≤18 — 79 61 No No No
xlink:actuate ? ? ? ? ? ?
xlink:href 1 12 1.5 9 9 3.1
xlink:show ? ? ? ? ? ?
xlink:title ? ? ? ? ? ?
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
a 3 Yes 4 Yes 3.1 Yes
download ? ? Yes ? ? ?
href Yes Yes 51 ? 12.2 Yes
hreflang No No 61 No No No
ping No No 61 No No No
referrerPolicy 51 51 52 41 No 7.2
rel No No 61 No No No
target 3 Yes 4 Yes 3.1 Yes
type No No 61 No No No
xlink:actuate ? ? ? ? ? ?
xlink:href 3 Yes 4 Yes 3.1 Yes
xlink:show ? ? ? ? ? ?
xlink:title ? ? ? ? ? ?

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