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