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

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!