General Discussion

James Hollingworth
James Hollingworth
3,662 Points

How do you make a SVG clickable?

I am new to using svg's but how do you make them clickable? the code below doesn't work.

<a href="#">
<object data="img/twitter.svg" type="image/svg+xml" class="mailicon">
</object>
</a>

Can anyone help?

Thanks

8 Answers

Alan Johnson
Alan Johnson
7,623 Points

There are two good ways to do that. Since clicks don't bubble out of the object tag you can use a pseudo element to on the link to make it happen, or you could add the a tag in the svg file.

With Pseudo-elements:

Your markup:

<a href="#" class="svg">
<object data="img/twitter.svg" type="image/svg+xml" class="mailicon">
</object>
</a>

And your CSS:

a.svg:after {
  content: ""; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

The other method is to use a link inside of your SVG file. There's info about that on the W3C Wiki.

James Hollingworth
James Hollingworth
3,662 Points

Thanks for the help. I have tried your code but it makes my whole page clickable rather than just the item. I am surprised how hard it is to make a SVG a link. I have tried to look at a link inside the svg but that wasn't so clear. I probably will look again. What do you think with your code causes the whole site to link to the href?

thanks so much for your help

Alan Johnson
Alan Johnson
7,623 Points

Oh, oops! Here's what you need to add:

a.svg {
  position: relative;
  display: inline-block;
}

That'll keep it from taking over the whole page. Here's a demo of it on CodePen: SVG Link Demo.

Nathalie C
Nathalie C
2,594 Points

I have just found this thread having had the issue that my responsive object svg would not display in Firefox if I wrapped it in an anchor tag. And whilst displaying in all the other browsers I tested on (Safari, Chrome, Kindle Fire, iPhone, Android) the responsiveness had stopped working. I checked your code pen demo and it had the same problem. I changed the display from inline-block to block and normal service was resumed, with the clickable svg now displaying in Firefox, and responsiveness fully restored across all browsers. Would this have backward support issues though?

Thomas Quayle
Thomas Quayle
4,388 Points

I found the same issue as Nathalie.

Her solution does seem to fix it, although I haven't done any further testing on it.

Thanks to both Alan & Nathalie for this!

Thomas Quayle
Thomas Quayle
4,388 Points

Actually, I needed display:inline-block to work as I had objects lined up horizontally.

I had previously set a specific percentage width on the object, which caused the issue.

Instead, I apply the specific percentage width to a.svg & change the width of object to 100% (so it extends to the width of its parent element a.svg which we have now defined as a block level element)

It looks like it works in all the browsers.

You can check out my update to the demo on CodePen: SVG Link Demo - Edit.

James Hollingworth
James Hollingworth
3,662 Points

Thats amazing! thank you very much. It really works. i have be really confused by it.

Have a great day

Alan Johnson
Alan Johnson
7,623 Points

So glad I could help! :clap: :+1:

david pollard
david pollard
3,574 Points

@commondream Thank you! Your method relieved my headache.

Chris James
Chris James
18,009 Points

This was very helpful, thanks!