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

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



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

 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

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

|  |  |
| --- | --- |
| Categories | Container element |
| Permitted content | Any number of the following elements, in any order:Animation elementsDescriptive elementsShape elementsStructural elementsGradient elements`<a>`, `<clipPath>`, `<color-profile>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>` |

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Links |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.