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.

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

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

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

Thanks Marcus! Worked like a champ for me.

Lea Coetzee
Lea Coetzee
3,035 Points

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

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

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

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

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 "../"