SVG Links

Beginner

⏱️ 10 min read

📚 Updated: Aug 2026

🎯 5 Examples

🚀 5 Try-it labs

Advanced

SVG Links tutorial illustration showing clickable shapes inside an SVG

Overview

What You’ll Learn

SVG’s <a> element turns shapes into real hyperlinks. This tutorial covers modern href (and legacy xlink:href), safe new-tab linking with target and rel, hover styling, accessibility, five worked examples, and how SVG links compare to HTML anchors and click handlers.

<a>

SVG anchor

Wrap clickable shapes inside the SVG <a> element.

href

Modern attribute

Prefer href for new SVG — destination URL or path.

target & rel

Safe new tabs

Use _blank with noopener noreferrer for external links.

Hover CSS

Feedback

Change fill, stroke, or transform on a:hover.

Accessibility

Labels & hit area

Visible text or aria-label, plus a generous tap target.

xlink:href

Legacy

Still appears in older SVG — prefer href for new work.

Introduction

SVG links let users click an icon, badge, map region, or diagram node and navigate like any other hyperlink. You wrap the graphics in an SVG <a> and set a destination with href.

Unlike wiring onclick handlers, real anchors work with middle-click, open-in-new-tab, and browser history — the same mental model as HTML links.

Why it matters?

Clickable SVG keeps icons and diagrams sharp and navigable without exporting separate image maps or bolting on fragile JavaScript for basic navigation.

Key Highlights

Real Hyperlinks

Native navigation with href — not only click scripts.

Safe External Tabs

target="_blank" plus rel="noopener noreferrer".

Hover Feedback

CSS on the anchor communicates that shapes are clickable.

Accessible Labels

Text inside the link or aria-label for screen readers.

In short: wrap shapes in SVG <a href="...">, style on hover, and label the destination clearly.

Foundation

📝 Syntax

Basic form of an SVG link:

index.html

<svg width="200" height="80">
  <a href="/svg">
    <rect x="20" y="20" width="160" height="40" rx="10" fill="#2563eb" />
  </a>
</svg>

Attributes

Attribute	Type	Description
`href`	URL	Modern destination for the link (preferred).
`xlink:href`	URL	Legacy destination attribute — avoid for new code.
`target`	Keyword	Where to open: `_self`, `_blank`, etc.
`rel`	Tokens	Use `noopener noreferrer` with `_blank`.
`aria-label`	Text	Accessible name when visible text is missing.

Minimal workflow

index.html

<!-- 1. Wrap shapes -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  <rect ... />
  <text ...>Label</text>
</a>

<!-- 2. Style feedback -->
<style>
  a:hover rect { opacity: 0.9; }
</style>

Clickability tips

Idea	Detail	Notes
Painted area	Needs fill or stroke	`fill="none"` alone is hard to hit
Text labels	`pointer-events: none`	Clicks pass through to the link
Overlays	Later elements win	Don’t cover the link region

Cheat Sheet

⚡ Quick Reference

Goal	Code
Basic link	`<a href="/svg"><rect ... /></a>`
External new tab	`target="_blank" rel="noopener noreferrer"`
Hover fill	`a:hover rect { fill: #0ea5e9; }`
Accessible name	`<a href="..." aria-label="SVG home">`
Pass clicks through text	`style="pointer-events:none"` on `<text>`
Legacy attribute	`xlink:href` (prefer `href`)

Compare

📋 SVG `<a>` vs HTML `<a>` vs `onclick`

All can respond to clicks — pick the right tool for navigation vs behaviour.

SVG <a>

inside <svg>

Hyperlink shapes, icons, and map regions

HTML <a>

wrap the SVG

Whole graphic as one link from outside

onclick / JS

custom behaviour

Toggles, tooltips — see Interactivity

Image map

legacy <map>

Older raster approach — prefer SVG links

Context

When to Use SVG Links

Reach for SVG <a> when a graphic region should navigate like a normal link.

Icon buttons
Logo marks and toolbar icons that open pages or docs.
Diagram nodes
Flowchart boxes that deep-link to detail pages.
Simple maps
Regions or pins that navigate to location pages.
CTA badges
Illustrated call-to-action shapes inside marketing graphics.
Not for UI toggles
For show/hide and state without navigation, use interactivity patterns instead.

Key benefit: vector-sharp graphics that behave like real links — middle-click, new tab, and shareable URLs included.

Hands-On

Examples Gallery

Five starter snippets using SVG <a>. Click View Output for a preview, or Try It Yourself to edit live.

📚 Getting Started

Wrap a shape, then link inside your site.

Example 1 — Wrap a Shape with href

Make a rectangle clickable. 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

How It Works

The SVG <a> wraps the rect and label. pointer-events: none on text ensures clicks hit the link, not the text alone.

Example 2 — Internal Navigation

Link to another page on the same site with a relative href.

index.html

<svg width="200" height="80" viewBox="0 0 200 80">
  <a href="/svg">
    <rect x="20" y="18" width="160" height="44" rx="12" fill="#2563eb" />
    <text x="100" y="46" text-anchor="middle" font-size="14" fill="white"
          font-family="system-ui,Segoe UI,Arial" style="pointer-events:none">
      Go to SVG
    </text>
  </a>
</svg>

Try It Yourself

How It Works

Relative paths work the same as in HTML. Default target is the current tab (_self).

📈 Practical Patterns

Hover feedback, accessible names, and larger tap targets.

Example 3 — Hover Styles

Communicate clickability by changing fill and lifting the shape on hover.

index.html

<svg width="220" height="100" viewBox="0 0 220 100">
  <style>
    .chip rect{cursor:pointer;transition:fill 160ms ease,transform 160ms ease}
    .chip:hover rect{fill:#0ea5e9;transform:translateY(-2px)}
  </style>
  <a class="chip" href="/svg/interactivity">
    <rect x="30" y="28" width="160" height="44" rx="22" fill="#6366f1" />
    <text x="110" y="56" text-anchor="middle" font-size="13" fill="white"
          font-family="system-ui,Segoe UI,Arial" style="pointer-events:none">
      Hover me
    </text>
  </a>
</svg>

Try It Yourself

How It Works

Style the child shape with a:hover rect (or a class). Touch devices may not hover — keep the default look clearly button-like too.

Example 4 — Accessible Label Without Visible Text

When the graphic is icon-only, give the link an accessible name with aria-label.

index.html

<svg width="120" height="120" viewBox="0 0 120 120">
  <a href="/svg" aria-label="SVG introduction">
    <circle cx="60" cy="60" r="42" fill="#3b82f6" />
    <path d="M48 60h24M60 48v24" stroke="white" stroke-width="6"
          stroke-linecap="round" style="pointer-events:none" />
  </a>
</svg>

Try It Yourself

How It Works

Screen readers announce the aria-label. Prefer visible text when you can; use aria-label for compact icons.

Example 5 — Larger Hit Area

Wrap a small icon with an invisible (or nearly invisible) rect so the tap target stays generous on mobile.

index.html

<svg width="160" height="80" viewBox="0 0 160 80">
  <a href="/svg/links" aria-label="SVG links tutorial">
    <!-- Large invisible hit area -->
    <rect x="10" y="10" width="140" height="60" rx="12"
          fill="#000" fill-opacity="0" />
    <!-- Visible icon -->
    <path d="M58 40h16M70 28v16" stroke="#0f172a" stroke-width="4"
          stroke-linecap="round" style="pointer-events:none" />
    <circle cx="70" cy="40" r="18" fill="none" stroke="#0f172a"
            stroke-width="3" style="pointer-events:none" />
  </a>
</svg>

Try It Yourself

How It Works

A rect with fill-opacity="0" still receives pointer events. Put decorative strokes under pointer-events: none so the big rect remains the hit target.

Use Cases

Real-world places where SVG links show up every day.

1. Logo Links

Brand marks that return home or open the product site.

Example: header logo SVG wrapping href="/".

2. Infographic Regions

Clickable slices that deep-link to related articles.

Example: pie segment linking to a category page.

3. Dashboard Cards

Illustrated tiles that open reports or settings.

Example: metric badge linking to a detail view.

4. Docs Navigation

Diagram steps that jump to matching chapters.

Example: architecture box linking to an API page.

5. Social Icons

External profile icons opening in a new tab safely.

Example: GitHub mark with rel="noopener".

6. Learning Demos

Tutorial graphics that jump to the next lesson.

Example: “Next topic” shape in an SVG diagram.

Pro Tip: for one link around the whole graphic, wrapping the <svg> in an HTML <a> is often simpler than nesting SVG anchors.

Advantages

Why use SVG anchors instead of only JavaScript click handlers.

1. Real Navigation
Works with middle-click, open-in-new-tab, and browser history.
2. Stays Sharp
Vector icons remain crisp while staying fully clickable.
3. Multiple Regions
Several anchors can live in one SVG for maps and diagrams.
4. Progressive Enhancement
Basic navigation works even if custom JS fails to load.
5. Familiar APIs
href, target, and rel match what you already know from HTML.

Pro Tip: keep navigation in <a href> and reserve JS for behaviour that is not a page change.

Usage Tips

Follow these practices for reliable, accessible SVG links.

1. Prefer href
Use modern href for new SVG; treat xlink:href as legacy.
2. Secure New Tabs
Always pair target="_blank" with rel="noopener noreferrer".
3. Show Hover Feedback
Change fill, stroke, or slight lift so users know it is clickable.
4. Keep Hit Areas Large
Aim for comfortable tap targets — expand with an invisible rect if needed.
5. Label the Destination
Visible text or aria-label so assistive tech can announce the link.

Pro Tip: set pointer-events: none on decorative text and strokes so the painted hit target stays predictable.

Common Pitfalls

Avoid these mistakes when your SVG link refuses to click.

1. No Painted Hit Area
fill="none" with no stroke is nearly impossible to click.
→ Add a fill, stroke, or transparent rect for the hit target.
2. Overlapping Elements
A later shape can sit on top and steal clicks.
→ Check stacking order and pointer-events.
3. Unsafe target="_blank"
Opening external pages without rel can expose window.opener.
→ Always add rel="noopener noreferrer".
4. Tiny Tap Targets
Small icons frustrate mobile users.
→ Expand the hit area with a larger transparent shape.
5. Missing Accessible Name
Icon-only links without text or aria-label confuse assistive tech.
→ Add a label that describes the destination.

Pro Tip: if clicks fail, inspect for overlays, pointer-events: none on the wrong element, and whether the link wraps a painted shape.

🧠 How an SVG Link Works

Wrap shapes in SVG <a>

Place the clickable graphics inside <a> within the same <svg>.

Wrap

Set the destination with href

Use modern href for internal or external URLs. Prefer it over legacy xlink:href.

href

Add target and rel when needed

For new tabs, set target="_blank" and rel="noopener noreferrer".

Safety

Style and label the control

Hover CSS shows it is interactive; text or aria-label names the destination.

A clickable vector control

Users navigate with a sharp SVG that behaves like a normal hyperlink.

Important Notes

Prefer href on SVG <a>; xlink:href is legacy.
Pair target="_blank" with rel="noopener noreferrer".
Links need a painted hit area — fill, stroke, or transparent rect.
Label destinations with visible text or aria-label.
For non-navigation behaviour, see SVG Interactivity.
Whole-SVG links are often easier as an HTML <a> wrapping the <svg>.

Quick Takeaway: wrap painted shapes in SVG <a href>, secure external tabs, and label the control clearly.

Compatibility

Browser Support

SVG linking with <a href> is supported in all modern browsers. Legacy xlink:href still works in many engines but is not needed for new projects.

✓ SVG 1.1+ / SVG2 href

SVG <a> links

Use href on SVG anchors in inline SVG. Chrome, Firefox, Safari, Edge, and mobile browsers all support clickable SVG links for navigation.

100% Modern browsers

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<a href> Universal

Bottom line: Safe for production. Prefer href; keep xlink:href only when maintaining older SVG assets.

Wrap Up

🎉 Conclusion

SVG links are straightforward: wrap shapes in <a href="...">, style for feedback, and label the destination. Prefer modern href, and secure external tabs with rel="noopener noreferrer".

Practice the five examples above, then revisit SVG Introduction or explore more topics from the sidebar.

Keep hit areas large, avoid overlays, and use interactivity patterns when you need behaviour without navigation.

View Examples Gallery Back to SVG Introduction

Pro Tips

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

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG links

Turn vector shapes into real hyperlinks.

Core concepts

🔗 01

<a>

Wrap clickable shapes

API

➜ 02

href

Modern destination

URL

🔓 03

rel

Safe blank tabs

Security

✨ 04

Hover

CSS feedback

♿ 05

Labels

Text or aria-label

a11y

❓ Frequently Asked Questions

How do I make an SVG element a link?

Wrap the SVG shape (rect, circle, path, etc.) inside an SVG <a> element and set href to the destination. Example: <a href="/page"><rect ... /></a>.

Should I use href or xlink:href in SVG links?

Use href in modern SVG. xlink:href is legacy and kept for older content. If you need maximum compatibility, you may include both, but prefer href.

How do I open an SVG link in a new tab safely?

Use target="_blank" and add rel="noopener noreferrer" to prevent the new page from accessing window.opener.

Why is my SVG link not clickable?

Common causes: another element is covering the link, pointer-events is disabled, or the clickable element has no painted area (fill="none" with no stroke).

How do I style an SVG link on hover?

Apply CSS to the wrapped shape using selectors like a:hover rect or .link:hover .shape to change fill, stroke, opacity, or transforms.

How do I make SVG links accessible?

Add visible text labels inside the link, or use aria-label on the <a> element. Ensure the hit area is large enough for touch, and keep keyboard focus visible when possible.

Did you Know? 🔊

SVG has its own <a> element inside the SVG namespace — wrap shapes with it and set href to turn graphics into real hyperlinks. You can put several <a> elements in one SVG so different regions navigate to different URLs — perfect for simple interactive maps.

Back to SVG Introduction

You finished the Advanced track — revisit the SVG overview or pick another topic from the sidebar.

SVG Introduction →

About the author

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)

8 people found this page helpful

SVG Interactivity SVG Introduction

SVG Links

What You’ll Learn

<a>

href

target & rel

Hover CSS

Accessibility

xlink:href

Introduction

Why it matters?

Real Hyperlinks

Safe External Tabs

Hover Feedback

Accessible Labels

📝 Syntax

Attributes

Minimal workflow

Clickability tips

⚡ Quick Reference

📋 SVG <a> vs HTML <a> vs onclick

When to Use SVG Links

Icon buttons

Diagram nodes

Simple maps

CTA badges

Not for UI toggles

Examples Gallery

📚 Getting Started

Example 1 — Wrap a Shape with href

How It Works

Example 2 — Internal Navigation

How It Works

📈 Practical Patterns

Example 3 — Hover Styles

How It Works

Example 4 — Accessible Label Without Visible Text

How It Works

Example 5 — Larger Hit Area

How It Works

Use Cases

1. Logo Links

2. Infographic Regions

3. Dashboard Cards

4. Docs Navigation

5. Social Icons

6. Learning Demos

Advantages

1. Real Navigation

2. Stays Sharp

3. Multiple Regions

4. Progressive Enhancement

5. Familiar APIs

Usage Tips

1. Prefer href

2. Secure New Tabs

3. Show Hover Feedback

4. Keep Hit Areas Large

5. Label the Destination

Common Pitfalls

1. No Painted Hit Area

2. Overlapping Elements

3. Unsafe target="_blank"

4. Tiny Tap Targets

5. Missing Accessible Name

🧠 How an SVG Link Works

Wrap shapes in SVG <a>

Set the destination with href

Add target and rel when needed

Style and label the control

A clickable vector control

Important Notes

Browser Support

SVG &lt;a&gt; links

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about SVG links

<a>

📋 SVG `<a>` vs HTML `<a>` vs `onclick`

SVG <a> links