<a>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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.

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>`,`<filter>`,`<foreignObject>`,`<image>`,`<marker>`,`<mask>`,`<pattern>`,`<script>`,`<style>`,`<switch>`,`<text>`,`<view>`

Attributes

download: Instructs browsers to download aURL 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: TheURL 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
interestforExperimental Non-standard: Defines the<a> element as aninterest invoker. Its value is theid 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
pingExperimental: A space-separated list of URLs to which, when the hyperlink is followed,POST requests with the bodyPING will be sent by the browser (in the background). Typically used for tracking. For a more widely-supported feature addressing the same use cases, seeNavigator.sendBeacon().Value type:<list-of-URLs>;Default value:none;Animatable:no
referrerpolicy: Whichreferrer to send when fetching theURL.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
target: Where to display the linkedURL.Value type:_self |_parent |_top |_blank |<XML-Name>;Default value:_self;Animatable:yes
type: AMIME type for the linked URL.Value type:<string>;Default value:none;Animatable:no
xlink:hrefDeprecated: 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 theSVGAElement interface.

Example

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

html

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

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 withHTML's<a> element, selectinga with CSS orquerySelector may apply to the wrong kind of element. Try the@namespace rule to distinguish the two.