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

HTML Build a Responsive Website Responsive Design Vector Graphics (SVG)

Bryan Jenkins
Bryan Jenkins
5,438 Points
Posted by Bryan Jenkins
Bryan Jenkins
5,438 Points

How can I add a link on an SVG?

Is there a simple way to add a link around an svg? I tried:

<a href="https://twitter.com/#!/digitalwavepro">
  <object data="images/social-icons/twitter.svg" type="image/svg+xml">
       <!--[if lte IE 8]>
       <img src="images/twitter.png" width="100%">
       <![endif]-->                       
   </object>
</a>

The link is not working though... When I hover the link the pointer doesn't change. I inspected the element with chrome and it says the anchor is showing up around the object, it's just not functioning as it should.

1 Answer

Jacob Herper
Jacob Herper
91,103 Points
Jacob Herper
Jacob Herper
91,103 Points

The problem is, that you can't add a link to an object element. I usually use a regular image element: < img src="path/to.svg" > and use a JS fallback solution: http://css-tricks.com/using-svg/

It works fine for me, although it can be a bit of a pain and all new browsers display svg images without a problem.

Bryan Jenkins
Bryan Jenkins
5,438 Points
Bryan Jenkins
Bryan Jenkins
5,438 Points

I initially tried that but the browser will not display the svg. It only shows up if I use the above code. I tried in the most recent chrome and safari browsers. I can't find anyone else online having this issue. I tried using this fallback method

<img src="images/social-icons/twitter.svg" onerror="this.onerror=null; this.src='images/social-icons/twitter.png'">

and the png doesn't show up. I know it is throwing an error for some reason but I can't figure out why. I'm really surprised this course ended without adding links to the social icons or the logo.

Jacob Herper
Jacob Herper
91,103 Points
Jacob Herper
Jacob Herper
91,103 Points

What happens if you don't use any fallback method? If the browser doesn't show your svg at all, there might be a problem with your file. Except for IE8, all browsers should display svg images: http://caniuse.com/#feat=svg