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 trialMagnus Benoni
31,059 PointsSVGs 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
15,719 PointsI 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 Ramadan
13,849 PointsSometimes 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
Samuel Essim
Front End Web Development Techdegree Student 15,963 Pointsplease where can i find the .htaccess file Karim Ramadan
Flurin Dürst
9,213 PointsDid 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
31,059 PointsYes, 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":
Flurin Dürst
9,213 PointsI 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 "../"
Dave Huish
17,727 PointsDave Huish
17,727 PointsThanks Marcus! Worked like a champ for me.
Lea Coetzee
3,035 PointsLea Coetzee
3,035 PointsYaaas this is fantastic, thanks! Works like a bomb!