Français

<a>

Create a clickable link inside an SVG

— 1 min read

  • HTML
  • accessibility
  • semantics
  • SVG

<a> SVG — The link inside a graphic

The <a> element in SVG works like its HTML counterpart: it creates a clickable link. But in SVG, it uses the href attribute (SVG namespace) and wraps SVG shapes or text, not HTML content.

When to use it

You want to make part of a graphic clickable: a diagram node, a map area, a chart label that leads to a detail page.

What you gain

Accessibility: unlike HTML <a>, SVG <a> is not focusable by default in all browsers. Add tabindex="0" and accessible text (via a child <title> or aria-label) to guarantee keyboard navigation.

Code example

<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <a href="/dashboard" tabindex="0">
    <title>Go to dashboard</title>
    <rect x="10" y="10" width="180" height="40" rx="8" fill="teal" />
    <text x="100" y="36" text-anchor="middle" fill="white" font-size="1rem">
      Dashboard
    </text>
  </a>
</svg>

Further reading