Index

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.

Usage context

{{svginfo}}

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
• interestfor {{experimental_inline}} {{non-standard_inline}}
  • : Defines the <a> element as an interest invoker. Its value is the id of a target element that will be affected in some way (normally shown or hidden) when interest is shown or lost on the invoker element (for example, by hovering/unhovering or focusing/blurring it). See Using interest invokers for more details and examples. 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

DOM Interface

This element implements the {{domxref("SVGAElement")}} interface.

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/Reference/Element/circle">
    <circle cx="50" cy="40" r="35" />
  </a>

  <!-- A link around a text -->
  <a href="/docs/Web/SVG/Reference/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 {{cssxref("@namespace")}} rule to distinguish the two.

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

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