Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
James Hollingworth
3,662 PointsHow 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
7,625 PointsThere 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
3,662 PointsThanks 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
7,625 PointsOh, 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
2,594 PointsI 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
4,388 PointsI 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
4,388 PointsActually, 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
3,662 PointsThats amazing! thank you very much. It really works. i have be really confused by it.
Have a great day
Alan Johnson
7,625 PointsSo glad I could help! 
david pollard
3,574 Points@commondream Thank you! Your method relieved my headache.
Chris James
19,102 PointsThis was very helpful, thanks!
Krishan Caldwell
8,182 PointsAwesome! Thanks very much