The <a> SVG element creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.

In SVG, the <a> element is a container, meaning, you can create a link around text, like in HTML, but you can also create a link around any shape.

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

  <!-- A link around a text -->
  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
    <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 svgns url(http://www.w3.org/2000/svg);

svgns|a {
  cursor: pointer;
}

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

svgns|a:hover, svgns|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 between the two.

Attributes

download
This attribute 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
This attribute contains the URL or URL fragment that the hyperlink points to.
Value type: <URL> ; Default value: none; Animatable: yes
hreflang
This attribute contains the URL or URL fragment that the hyperlink points to.
Value type: <string> ; Default value: none; Animatable: yes
ping
This attribute contains 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
This attribute indicates which referrer to send when fetching the URL.
Value typeno-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
This attribute specifies the relationship of the target object to the link object.
Value type: <list-of-Link-Types> ; Default value: none; Animatable: yes
target
This attribute specifies where to display the linked URL.
Value type_self|_parent|_top|_blank|<name> ; Default value: _self; Animatable: yes
type
This attribute specifies the media type in the form of a MIME type for the linked URL.
Value type: <string> ; Default value: none; Animatable: yes
xlink:href Deprecated since SVG 2
This attribute contains the URL or URL fragment that the hyperlink points to.
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

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

Specifications

Specification Status Comment
Referrer Policy
The definition of 'referrer attribute' in that specification.
Candidate Recommendation Added the referrerpolicy attribute.
Scalable Vector Graphics (SVG) 2
The definition of '<a>' in that specification.
Candidate Recommendation Replaced xlink:href attribute by href
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<a>' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3.1Samsung Internet Android Full support Yes
downloadChrome ? Edge ? Firefox Full support YesIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
hrefChrome Full support YesEdge Full support YesFirefox Full support 51IE Full support YesOpera Full support YesSafari No support NoWebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support 51Opera Android ? Safari iOS No support NoSamsung Internet Android Full support Yes
hreflangChrome No support NoEdge Full support YesFirefox Full support 61IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 61Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
pingChrome No support NoEdge Full support YesFirefox Full support 61IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 61Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
referrerPolicyChrome Full support 51Edge No support NoFirefox Full support 52IE No support NoOpera Full support 38Safari Full support 11.1WebView Android Full support 51Chrome Android Full support 51Edge Mobile No support NoFirefox Android Full support 52Opera Android Full support 38Safari iOS No support NoSamsung Internet Android Full support 7.2
relChrome No support NoEdge Full support YesFirefox Full support 61IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 61Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
targetChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3.1Samsung Internet Android Full support Yes
typeChrome No support NoEdge Full support YesFirefox Full support 61IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 61Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
xlink:actuate
Deprecated
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:href
Deprecated
Chrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3.1Samsung Internet Android Full support Yes
xlink:show
Deprecated
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:title
Deprecated
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

Document Tags and Contributors

Last updated by: fabioricali,