--- title: slug: Web/SVG/Element/a tags: - Element - SVG - SVG Anchor 엘리먼트 translation_of: Web/SVG/Element/a ---
{{SVGRef}}

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

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

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

{{htmlattrxref("download", "a")}} {{experimental_inline}}
This attribute 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")}}
This attribute contains the {{Glossary("URL")}} or URL fragment that the hyperlink points to.
Value type: <URL> ; Default value: none; Animatable: yes
{{htmlattrxref("hreflang", "a")}}
This attribute contains the URL or URL fragment that the hyperlink points to.
Value type: <string> ; Default value: none; Animatable: yes
{{htmlattrxref("ping", "a")}} {{experimental_inline}}
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
{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}
This attribute indicates 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
{{htmlattrxref("rel", "a")}} {{experimental_inline}}
This attribute specifies the relationship of the target object to the link object.
Value type: <list-of-Link-Types> ; Default value: none; Animatable: yes
{{SVGAttr("target")}}
This attribute specifies where to display the linked {{Glossary("URL")}}.
Value type: _self|_parent|_top|_blank|<name> ; Default value: _self; Animatable: yes
{{htmlattrxref("type", "a")}}
This attribute specifies the media type in the form of a {{Glossary("MIME type")}} for the linked URL.
Value type: <string> ; Default value: none; Animatable: yes
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
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: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}
Styling Attributes
{{SVGAttr('class')}}, {{SVGAttr('style')}}
Conditional Processing Attributes
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
Event Attributes
Global event attributes, Document element event attributes, Graphical event attributes
Presentation Attributes
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
XLink Attributes
Most notably: {{SVGAttr("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

{{svginfo}}

Specifications

Specification Status Comment
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}} {{Spec2('Referrer Policy')}} Added the referrerpolicy attribute.
{{SpecName("SVG2", "linking.html#Links", "<a>")}} {{Spec2("SVG2")}} Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}
{{SpecName("SVG1.1", "linking.html#Links", "<a>")}} {{Spec2("SVG1.1")}} Initial definition

Browser compatibility

{{Compat("svg.elements.a")}}