Chapter 14: SVG Links
SVG Links means adding clickable hyperlinks inside your SVG graphics. You can make:
- A circle, rectangle, path, icon, or text clickable
- When user clicks → goes to another page, downloads file, opens email, jumps to section, etc.
This is done using the <a> element inside SVG — yes, SVG has its own <a> tag, very similar to HTML’s <a>, but it works perfectly around shapes, paths, groups, text, etc.
Important: SVG <a> is a container (like a wrapper). You put your shape/text inside it, and the whole thing becomes clickable.
1. Why Use SVG Links? (Real Reasons)
- Make icons/buttons in navbar clickable (e.g., home icon → home page)
- Interactive charts (click bar → details)
- Logos that link to homepage
- Downloadable SVG diagrams
- Map regions clickable
- Hover + click effects on vector graphics
2. Basic Syntax of SVG <a>
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<a href="..." <!-- REQUIRED – the URL to go to --> target="..." <!-- _blank, _self, _parent, _top --> download="..." <!-- if want download instead of open --> title="..." <!-- tooltip on hover --> > <!-- Put shape, text, group, path, etc. inside here --> </a> |
- <a> must be inside<svg>…</svg>
- href works like HTML (full URL, relative path, #anchor, mailto:, tel:, etc.)
- In modern browsers (2026): Just use href — no need for old xlink:href
- Old code sometimes uses xlink:href (for SVG 1.1 compatibility) — but now href is standard and preferred
3. Your First SVG Link Example (Copy-Paste Right Now!)
Make svg-link.html:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Links Basics</title> </head> <body> <h1>Clickable SVG Circle</h1> <svg width="300" height="200" viewBox="0 0 300 200" style="border:1px solid gray;"> <!-- Clickable green circle linking to Google --> <a href="https://www.google.com" target="_blank" title="Go to Google!"> <circle cx="150" cy="100" r="80" fill="limegreen" stroke="darkgreen" stroke-width="5"/> <text x="150" y="110" font-size="30" text-anchor="middle" fill="white">Click Me!</text> </a> </svg> <p>Hover → see tooltip. Click → opens Google in new tab!</p> </body> </html> |
What happens:
- Whole circle + text inside <a> becomes one big clickable area
- Click anywhere on green circle or “Click Me!” text → new tab to Google
- target=”_blank” → opens in new tab (like HTML)
- title → tooltip on hover
Zoom browser — link still works perfectly, text sharp!
4. More Real Examples (Try These!)
Example 1: Link Around a Path/Icon (Common for Buttons)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<defs> <path id="heart" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </defs> <a href="/favorite" title="Add to Favorites"> <use href="#heart" fill="red" transform="translate(50,50) scale(2)"/> </a> |
→ Clickable heart icon (use <use> for reuse)
Example 2: Download Link (SVG as Downloadable File)
XML
|
0 1 2 3 4 5 6 7 8 9 |
<a href="diagram.svg" download="my-diagram.svg"> <rect x="20" y="20" width="200" height="100" fill="orange"/> <text x="120" y="80" text-anchor="middle" fill="white">Download SVG</text> </a> |
→ Click rectangle → browser downloads “my-diagram.svg”
Example 3: Internal Link (Anchor in Same Page)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<a href="#section2"> <polygon points="150,10 280,190 20,190" fill="blue"/> </a> <!-- Somewhere else in SVG or HTML --> <div id="section2">You jumped here!</div> |
Example 4: Hover + CSS Style (Make Link Feel Nice)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> a:hover circle { fill: yellow; } a:hover text { fill: black; } </style> <a href="https://example.com"> <circle cx="100" cy="100" r="50" fill="blue"/> <text x="100" y="110" text-anchor="middle" fill="white">Hover & Click</text> </a> |
→ Hover changes colors (shows it’s interactive)
5. Important Attributes Table (Like Class Notes)
| Attribute | Meaning | Example | Notes |
|---|---|---|---|
| href | Destination URL | “https://google.com”, “#top”, “file.pdf” | Main one — use this! |
| target | Where to open | “_blank”, “_self” | _blank = new tab |
| download | Download instead of open | “report.svg” | Prompts save dialog |
| title | Tooltip on hover | “Visit site” | Accessibility + UX |
| rel | Relationship (like HTML) | “noopener noreferrer” | Security for _blank |
| hreflang | Language of target | “en” | Rare |
6. Teacher’s Tips (Hyderabad Student Style 😄)
- Always put shapes inside <a> — don’t put <a> around whole SVG unless you want entire graphic clickable
- For icons from Font Awesome/Material → wrap <path> or <g> in <a>
- Accessibility: Add aria-label or title so screen readers know what link does
- Common mistake: Use xlink:href only if old browser support needed — modern code just href
- In React/Vue: Inline SVG links work same, but watch namespace if using JSX
- Job/freelance: Clients love clickable SVG maps, interactive infographics, animated buttons
Understood SVG Links now? It’s what makes static vectors interactive! Want next: Full interactive icon set example? Animate link on hover? Or <use> + links? Or textPath inside link? Just tell me — we’re turning you into SVG expert! 🚀
