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

CSS CSS Basics (2014) Basic Layout Width and Height Properties

Derek Dawes
Derek Dawes
4,944 Points

arrow.svg is not showing on the website giving a broken link icon and showing the alt="down arrow"

Using workspace on this lesson and the arrow.svg file is present in the img folder. However I am showing a broken link icon "hence the alt="down arrow" is displaying" so I cant perform the lesson of re-sizing the arrow. Is this an treehouse issue? I am using google chrome and the rest of the website appears just fine.

Not sure if this is how I share a snapshot https://w.trhou.se/mbbk7c4ahs

3 Answers

Hey Derek,

This one was a little bit of a doozy, but I found a solution that makes all modern browsers happy, as far as I can tell. First, I can tell Guil is using Chrome in this video, but it must have been several versions ago. Chrome does not like linking to the svg file for whatever reason. Firefox is more than happy to do so. But that presents us with a problem, of course: browser compatibility.

The solution was to make the img into an object, and encapsulate the object inside a div that controls everything stylistically about the svg. It was pretty easy to do so:

<!-- Replace <img src="img/arrow.svg" alt="Down Arrow" /> with the following-->
<div class="arrow"><object data="img/arrow.svg" type="image/svg+xml"></object></div>

And then since we're going to add a class of "arrow" anyways to the img element, we add the following into the CSS:

.arrow {
  /* You already do this in the video */
  width: 50px;
  /* Centers the image */
  margin: 0 auto;
  /* And add whatever other code you want or need to */

This made Chrome and Firefox happy! I can't test with IE or Safari because I run Linux, but I'm 99% sure they will be happy as well!

My goodness thank you for this x.

Thanks for helping

You're welcome!

Jovan Dandridge
Jovan Dandridge
12,835 Points

Thanks for the help Marcus, im curious tho how you were able to find the answer?

You're welcome! Doing some research, I found an article where someone mentioned that you could use an <object> element to display svg files. And the <object> tag is supported in all modern browsers.