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 {{htmlelement("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

@namespace svg url(http://www.w3.org/2000/svg);
html,
body,
svg {
  height: 100%;
}

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

{{EmbedLiveSample('Example', 100, 100)}} 

[!WARNING] Since this element shares its tag name with HTML’s <a> element, selecting a with CSS or {{domxref("Document.querySelector", "querySelector")}}  may apply to the wrong kind of element. Try the @namespace rule to distinguish the two.

Attributes

• download
  • : Instructs browsers to download a {{Glossary("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
• {{SVGAttr("href")}} 
  • : The {{Glossary("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: no
• ping {{experimental_inline}} 
  • : A space-separated list of URLs to which, when the hyperlink is followed, {{HTTPMethod("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 {{domxref("Navigator.sendBeacon()")}} . Value type: <list-of-URLs> ; Default value: none; Animatable: no
• referrerpolicy
  • : Which referrer to send when fetching the {{Glossary("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: no
• {{SVGAttr("target")}} 
  • : Where to display the linked {{Glossary("URL")}} . Value type: _self|_parent|_top|_blank|<XML-Name> ; Default value: _self; Animatable: yes
• type
  • : A {{Glossary("MIME type")}}  for the linked URL. Value type: <string> ; Default value: none; Animatable: no
• {{SVGAttr("xlink:href")}}  {{deprecated_inline}} 
  • : 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

{{svginfo}} 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• {{SVGAttr("xlink:title")}}  attribute
• HTML {{HTMLElement("a")}}  element