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.

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.