Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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

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