SVG Links

Wrapping any SVG shape or group in an <a> element turns it into a real, clickable, keyboard-navigable hyperlink.

The <a> Element Inside SVG

SVG supports the same <a> element HTML does, and it behaves the same way: it needs an href, it can open in a new tab with target='_blank', and it makes every descendant -- a single shape or an entire group -- clickable and focusable. Because it's a real anchor, browsers give it built-in keyboard support and screen readers announce it as a link.

A Clickable Circle

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 100'>
  <a href='https://example.com' target='_blank'>
    <circle cx='60' cy='50' r='35' fill='#2563eb'/>
    <text x='60' y='55' text-anchor='middle' fill='white' font-size='14'>Visit</text>
  </a>
</svg>

</body>
</html>

Because <a> is a container element like <g>, it can wrap several shapes at once so the whole cluster acts as one link -- useful for icon-plus-label buttons or map pins made of multiple paths. Every child inherits the same href, so there's no need to repeat the link on each piece.

An Icon-and-Label Link Group

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 220 90'>
  <a href='#pricing'>
    <rect x='10' y='15' width='200' height='60' rx='10' fill='#0f172a'/>
    <circle cx='40' cy='45' r='14' fill='#22d3ee'/>
    <text x='70' y='50' fill='white' font-size='16'>See pricing</text>
  </a>
</svg>

</body>
</html>
Note: A common mistake is wrapping shapes in <a> but forgetting they still need visible affordance -- add a cursor: pointer style and a hover state, since browsers do not automatically style SVG links the way they style HTML text links.

Styling and Accessibility

Give SVG links the same care as HTML links: a :hover or :focus-visible style (often a fill or stroke change) so users can tell something is interactive, and either a visible <text> label or a <title> child so screen reader users hear a meaningful name instead of 'link, group'. CSS selectors like a:hover circle work exactly as you'd expect.

  • href (and optionally target, rel) works exactly as in HTML
  • <a> can wrap a single shape or an entire <g> of shapes
  • a <title> child gives an accessible name announced by screen readers
  • style a:hover / a:focus-visible in CSS -- SVG gives no default hover feedback
  • cursor: pointer is not automatic in every browser; set it explicitly

Hover-Styled Link with an Accessible Title

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 100'>
  <style>
    a.card-link rect { transition: fill 0.15s; }
    a.card-link:hover rect { fill: #1d4ed8; }
  </style>
  <a href='#learn-more' class='card-link'>
    <title>Learn more about SVG links</title>
    <rect x='10' y='10' width='180' height='80' rx='8' fill='#2563eb'/>
    <text x='100' y='55' text-anchor='middle' fill='white' font-size='15'>Learn more</text>
  </a>
</svg>

</body>
</html>
Note: Test SVG links with keyboard Tab navigation, not just a mouse -- because <a> is a real anchor it receives focus automatically, but a custom :focus style is still worth adding since default focus rings can be easy to miss against colorful shapes.
AttributePurpose
hrefDestination URL or in-page anchor, same as HTML
target'_blank', '_self', etc, controls where the link opens
<title> (child)Accessible name read by screen readers
class / styleHooks for CSS hover and focus states
xlink:hrefLegacy equivalent of href, still supported for older renderers

Exercise: SVG Links

Which element wraps SVG shapes to turn them into clickable hyperlinks?

Keep Going

SVG Interview QuestionsPractice real questions asked for SVGFrontend Developer SalarySee what Frontend Developer roles pay in the marketAuto Apply for JobsApply to open roles related to SVG and tweak your resume