SVG Links

Beginner
⏱️ 6 min read
📚 Updated: Aug 2025
🎯 2 Examples
Navigation
SVG Links tutorial illustration showing clickable shapes inside an SVG

What You’ll Learn

You can make SVG graphics clickable by wrapping shapes inside an SVG <a> element. This lets users click an icon, badge, map region, or diagram node to navigate to another page.

This guide shows modern SVG linking with href (and the legacy xlink:href), how to open links in a new tab safely with target + rel, and how to add hover styling and accessibility.

⚡ Quick Reference — SVG Links

Element <a>

Wrap the clickable shapes

Modern attribute href

Preferred for new SVG

Legacy attribute xlink:href

Older content (avoid if possible)

New tab target + rel

_blank + noopener

Hover style a:hover

Change fill/stroke on hover

Basic Syntax
<svg>
  <a href="/path">
    <rect x="10" y="10" width="100" height="50" />
  </a>
</svg>

👀 Live Preview — Clickable SVG

Hover and click the preview to see how an SVG link behaves. (The preview links to internal routes.)

Internal link Go to SVG
New tab (safe) Example.com
1

Wrap a Shape with <a href="...">

This example uses href (recommended) to make a rectangle clickable. It opens in a new tab with a safe rel value.

index.html
<svg width="240" height="160" viewBox="0 0 240 160">
  <style>
    .btn rect{cursor:pointer;transition:transform 140ms ease,opacity 140ms ease}
    .btn:hover rect{transform:translateY(-2px);opacity:0.95}
  </style>

  <a class="btn" href="https://example.com" target="_blank" rel="noopener noreferrer">
    <rect x="40" y="48" width="160" height="64" rx="16" fill="#22c55e" />
    <text x="120" y="86" text-anchor="middle" font-size="14" fill="white" font-family="system-ui,Segoe UI,Arial" style="pointer-events:none">
      Open Example.com
    </text>
  </a>
</svg>
Try It Yourself
2

Legacy xlink:href (When You See It)

Older SVG code uses xlink:href. Modern SVG uses href, but you may still encounter xlink in existing projects.

index.html
<svg width="240" height="120" viewBox="0 0 240 120">
  <a xlink:href="/svg" target="_self">
    <circle cx="120" cy="60" r="40" fill="#3b82f6" />
  </a>
</svg>

💡 Best Practices

Do

  • Prefer href for new SVG code
  • Use target="_blank" with rel="noopener noreferrer" for external links
  • Add hover styles to communicate clickability (fill, stroke, underline)
  • Use pointer-events: none on text labels so clicks hit the link target
  • Provide clear labels (text inside the SVG or aria-label)

Don’t

  • Open external links in a new tab without rel safety
  • Rely on xlink for new projects unless you must support very old code
  • Make tiny clickable targets that are hard to tap on mobile
  • Let other elements overlap the link region (it blocks clicks)
  • Assume hover works on touch devices—use clear button styling too

❓ Frequently Asked Questions

Wrap the shape in an SVG <a> element and set href to the destination (or xlink:href for legacy content).
Use href for modern SVG. You may see xlink:href in older codebases.
Use target="_blank" and add rel="noopener noreferrer" for external links.
Check for overlays blocking clicks, pointer-events settings, and ensure the link wraps a visible painted area (fill or stroke).
Use CSS selectors like a:hover rect or a class on the anchor to animate fill, stroke, opacity, or transforms.

Build Custom Clickable Regions

Next, learn SVG paths to create complex shapes for icons, diagrams, and interactive maps.

SVG Path →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

4 people found this page helpful

SVG Linear Gradients SVG Path