How to Make SVG Clickable
Make SVG paths, shapes, and icons clickable with anchor tags, JavaScript event listeners, and CSS pointer events — for interactive maps, charts, and UI.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Method 1: SVG anchor tag <a>
The simplest way to make an SVG element link to a URL.
- Wrap any SVG element in an <a> tag with href:
- <a href='/about'><circle cx='50' cy='50' r='40' fill='blue' /></a>
- Works like HTML links — right-click, open in new tab, keyboard navigation
- Add target='_blank' for external links
- Style the hover state: a:hover circle { fill: darkblue; }
Method 2: JavaScript Event Listeners
For complex interactions, attach JavaScript event listeners to SVG elements.
- querySelector('#my-path').addEventListener('click', handler)
- SVG elements support: click, mouseenter, mouseleave, mouseover, focus
- Use pointer-events: all in CSS to ensure the SVG element receives events
- For inline SVG: events bubble to the page JavaScript normally
- For SVG in <img>: events don't work — use inline SVG for interactive SVGs
Frequently Asked Questions
Why doesn't my SVG click event fire?
Common causes: 1) pointer-events: none set on the SVG or parent. 2) SVG loaded as <img> tag — img SVG elements don't receive JS events. 3) A transparent overlay element is capturing clicks. Check with DevTools.
How do I make an SVG image map (different areas with different links)?
Use inline SVG with multiple <a> elements wrapping different path/shape elements. Each <a href> defines the link for that region. This is more accessible and precise than HTML image maps.
How do I style clicked SVG elements?
Use CSS :active pseudo-class: path:active { fill: orange; }. Or JavaScript: on click, add a .selected class and style it in CSS. SVG supports all CSS pseudo-classes.
How do I create a clickable SVG world map?
Use an SVG world map (available free from simplemaps.com or Natural Earth). Each country is a <path> with an id. Add click listeners per path id. Show tooltip or navigate on click.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG