Welcome to the Treehouse Community
Looking to learn something new?
Magnus Benoni31,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?
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.
Karim Ramadan13,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"
I see, try changing your path to the svgs from
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 "../"