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