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

Development Tools Introduction to Front End Performance Optimization Optimize Assets Optimize Images

Magnus Benoni
Magnus Benoni
31,059 Points
Posted by Magnus Benoni
Magnus Benoni
31,059 Points

SVGs not displaying in Chrome

The file paths are correct, but the SVGs are only displaying broken image icons, and the SVG used for a background image is not displayed at all. They are showing up normally in Firefox, but not in Chrome.

What could be the reason for this?

4 Answers

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

I actually had a problem with loading .svg files myself. It seems that Chrome no longer likes linking to .svg files in <img> tags, but I found an easy solution. Here's what you can do:

<div class="social-icon">
<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>
</div>

The class I applied to the div was the same one that would be used for the image. In your case, you would give your div the class of "social-icon". You may have to set an explicit margin to get the image centered, if you're centering it that is: margin: 0 auto; and you can set the display of the div to inline if you wish for it to behave like an image. Otherwise, it will act just like an image, and Chrome and Firefox were happy with the object when I tested it. The object element has great browser compatibility.

Dave Huish
Dave Huish
17,727 Points
Dave Huish
Dave Huish
17,727 Points

Thanks Marcus! Worked like a champ for me.

Lea Coetzee
Lea Coetzee
3,035 Points
Lea Coetzee
Lea Coetzee
3,035 Points

Yaaas this is fantastic, thanks! Works like a bomb!

Karim Ramadan
Karim Ramadan
13,849 Points
Karim Ramadan
Karim Ramadan
13,849 Points

Sometimes it is not the browser, it is the server. add the following two lines to your .htaccess so the server can recognize svg files

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
Flurin Dürst
Flurin Dürst
9,213 Points
Flurin Dürst
Flurin Dürst
9,213 Points

Did you add the svg inside the img tag in html? If so: that's the problem, because the SVG image tag does not support "src" as an attribute. Add it as a background image via css and it should work. If this does not solve the problem or you did this already, could you paste the code you used to place the svg?

btw. this topic should be placed in "CSS" instead of "Development Tools"

Magnus Benoni
Magnus Benoni
31,059 Points
Magnus Benoni
Magnus Benoni
31,059 Points

Yes, I did the same as Nick did in the video referenced above, and it worked for him, but not in my browser.

Here's a snapshot of the code, the SVGs are linked in the footer of index.html, and also in main.css under "PAGE: CONTACT":

https://w.trhou.se/5rr17j45or

Flurin Dürst
Flurin Dürst
9,213 Points
Flurin Dürst
Flurin Dürst
9,213 Points

I see, try changing your path to the svgs from

  background-image: url('../assets/phone.svg');

to 

  background-image: url('assets/phone.svg');

Because the css-file is loaded in the home directory, and not inside the css folder you don't have to (or must not) switch to home directory with "../"