Chapter 13: SVG Links
What are SVG Links?
In SVG, hyperlinks are created using the <a> element — yes, the same tag name as in HTML!
But inside SVG, this <a> is an SVG element (in the SVG namespace), not an HTML one. It acts as a container: you put any SVG content inside it (shapes, text, groups <g>, paths, images <image>, etc.), and the whole thing becomes clickable.
Key differences from HTML <a>:
- It wraps vector shapes/text, not just text or <img>
- It uses href (modern) or historically xlink:href (older/deprecated but still works)
- You can style :hover, :active, :visited with CSS — but carefully (SVG links behave a bit differently)
- Very useful for: interactive maps, icons that link somewhere, clickable charts, SVG buttons/logos, infographics
Here are some visual examples of clickable SVG elements (shapes and text wrapped in links):
The modern way (SVG 2 / 2025+ best practice): use href
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg width="400" height="200" style="border:1px solid #eee; background:#f9f9f9;"> <a href="https://example.com" target="_blank"> <circle cx="100" cy="100" r="60" fill="#4CAF50"/> <text x="100" y="110" font-size="28" text-anchor="middle" fill="white"> Click me! </text> </a> </svg> |
Click the green circle + text → opens example.com in new tab!
Important attributes on SVG <a>
| Attribute | Meaning | Common values | Required? | Notes / Modern vs Old |
|---|---|---|---|---|
| href | The URL to go to | “https://…”, “#section”, “mailto:…” | Yes | Preferred (SVG 2+) |
| xlink:href | Old way (deprecated since SVG 2) | same as above | No | Still works everywhere, but avoid new code |
| target | Where to open (_self, _blank, _parent, _top, framename) | _blank (new tab) most common | No | Same as HTML |
| download | Suggest download instead of navigate | filename or empty | No | Forces download |
| rel | Relationship (nofollow, opener, etc.) | “noopener noreferrer” for security | No | Good practice with _blank |
| title | Tooltip on hover | “Go to our homepage” | No | Very useful for accessibility |
Pro tip (2025/2026 reality): Use only href for new work — all modern browsers support it perfectly on <a>, <use>, <image>, etc. If you must support very old browsers (IE9/ancient Android), add both: <a href=”…” xlink:href=”…”>
Example 1 – Clickable shape (rectangle linking to external site)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg width="300" height="160"> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank" rel="noopener"> <rect x="40" y="30" width="220" height="100" rx="12" fill="#2196F3"/> <text x="150" y="90" font-size="32" text-anchor="middle" fill="white"> MDN SVG Docs </text> </a> </svg> |
Hover → cursor changes to pointer (default browser behavior). Click → opens MDN in new tab.
Example 2 – Clickable icon + hover effect (CSS magic)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> .icon-link:hover { opacity: 0.8; transform: scale(1.1); } .icon-link:hover circle { fill: #FF5722; } </style> <svg width="120" height="120" viewBox="0 0 120 120"> <a class="icon-link" href="https://github.com" target="_blank"> <circle cx="60" cy="60" r="50" fill="#333"/> <text x="60" y="75" font-size="60" text-anchor="middle" fill="white">Git</text> </a> </svg> |
Hover → enlarges + color change — feels like a real button!
Example 3 – Linking to internal page section (#anchor)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<svg width="400" height="100"> <a href="#bottom-section"> <polygon points="50,20 350,20 200,80" fill="#E91E63"/> <text x="200" y="55" font-size="28" text-anchor="middle" fill="white"> Go Down </text> </a> </svg> <!-- Somewhere lower in the page --> <div id="bottom-section" style="margin-top:400px; height:200px; background:#f0f0f0;"> <h2>You arrived here by clicking the SVG arrow!</h2> </div> |
Example 4 – Group of elements as one link
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg width="280" height="180"> <a href="https://x.ai" target="_blank"> <g> <circle cx="140" cy="90" r="70" fill="#000"/> <text x="140" y="105" font-size="48" text-anchor="middle" fill="#fff">xAI</text> </g> </a> </svg> |
Everything inside <g> becomes one clickable unit.
Quick Cheat Sheet – SVG Links vs HTML Links
| Feature | SVG <a> | HTML <a> |
|---|---|---|
| Wraps shapes/icons/text | Yes | Mostly text/img |
| href vs xlink:href | href modern / xlink:href old | Only href |
| Hover cursor | Automatic pointer | Automatic pointer |
| CSS :hover on link | Works (but target SVG children) | Works directly |
| Best for | Interactive maps, icons, buttons, charts | Paragraphs, navigation |
Common beginner mistakes
- Using xlink:href without xmlns:xlink namespace on <svg> → fails in some cases (not needed anymore with plain href)
- Forgetting target=”_blank” + rel=”noopener” → security risk on external links
- No cursor: pointer; on custom styled links → user doesn’t know it’s clickable
- Wrapping external <object> or <img src=”file.svg”> in HTML <a> → sometimes doesn’t work (better to put <a>inside the SVG)
Mini practice tasks
- Make a red rounded rectangle that says “Visit Google” and links to google.com in a new tab
- Create a simple SVG icon (circle + text) that links to your favorite site with hover scale effect
- Make an arrow polygon that jumps to #footer on the page
Paste your code here if you want feedback — I’ll review it like we’re debugging together 😄
Any part confusing? href vs old xlink:href? Hover styling? Linking groups? Just ask — we’ll zoom in until it’s super clear! 🚀
