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 trialMichael Trilford
7,232 PointsTurns out embedding the SVG code directly in the <body> doesn't like IE8.
Adding the SVG code directly in IE8 likes to create a very weird error in the rendering. It will render some CSS, but not all of it.
I had to move the SVG code to the very bottom, not Ideal but this will make it work in IE8+
There was so much confusion, as this line of code shouldn't effect the rendering in my opinion.
The joys of debugging.
10 Answers
Jeff Jacobson-Swartfager
15,419 PointsYeah. Unfortunately, svg is not supported in IE8. However, there are some fallbacks you can use to deal with legacy browsers.
Michael Trilford
7,232 PointsYeh, this is a little different.
If you embed the SVG in the HTML (See front-end optimisation course - Create a sprite map)
It creates an error which stops the CSS to load in IE8. I'm happy to have no icons for IE8.
I might have to create a Codepen to share.
Michael Trilford
7,232 PointsIf only you can vote the reply as the best answer :-) Thanks
Jeff Jacobson-Swartfager
15,419 PointsHa! I'm glad I could help.
Michael Trilford
7,232 PointsActually, it works still. ( Removed post. )
Jeff Jacobson-Swartfager
15,419 PointsI'm not getting the same behavior you're seeing. In both IE8 and IE7 (emulations), the text is red for me.
See these screenshots.
Michael Trilford
7,232 PointsYup, I have deleted that Pen, as it did work.
I have no idea what's going on. Maybe the CSS needs to be more in depth.
Jeff Jacobson-Swartfager
15,419 PointsYou could be right, the CSS selectors might need to be more specific. However, since the codepen worked, I suspect that the specificity isn't the issue. Perhaps you just need to clear your cache?
If I can get this behavior duplicated locally I may be able to help you further, but at this point I'm just guessing. Sorry!
Michael Trilford
7,232 PointsYeh, I have checked my CSS for errors and it is all pretty good. I am using HTML5 elements in the HTML, so maybe that is part of it.
I don't think it is a massive problem, hopefully Project Spartan will help in the future.
Jeff Jacobson-Swartfager
15,419 PointsIn that case, good luck! If you ever discover the source of the issue, please post here. I'd love to find out what was going on.
I stand beside you in the hopes for what Project Spartan may do for modernizing the web for the enterprise. Hopefully it is more than just a marketing ploy!
Michael Trilford
7,232 PointsSince Safari needs the SVG at the top of the Body, I have had to come up with a new plan of attack.
I have decided import the SVG Sprite Map in using AJAX. IE8 Imports an alternative file. ( A hidden error message about the feature. )
<div id="addSVG" style="display: none;"><svg code is here></div>
This all works fine!
In saying that, I am going to add back in the original SVG Sprite Map into the HTML, then I will slowly add the different symbols to the markup. IE did play nice with one in there, so I will get to the bottom of this!
Michael Trilford
7,232 PointsUpdate!
IE8 doesn't like the SVG objects as self closing, so I had to modify the code. This works, but might be a pain.
<symbol id="gplusIcon" viewbox="0 0 48 48">
<path fill="#333333" d="M24.6 25.7l-1.1-0.9c-0.3-0.3-0.8-0.7-0.8-1.3 0-0.7 0.5-1.1 0.9-1.5 1.3-1 2.6-2.1 2.6-4.4 0-2.4-1.5-3.6-2.2-4.2h1.9l2-1.3h-6.2c-1.7 0-4.1 0.4-5.9 1.9 -1.3 1.2-2 2.8-2 4.2 0 2.4 1.9 4.9 5.2 4.9 0.3 0 0.7 0 1-0.1 -0.2 0.4-0.3 0.7-0.3 1.2 0 1 0.5 1.6 0.9 2.1 -1.4 0.1-4 0.3-6 1.4 -1.8 1.1-2.4 2.7-2.4 3.8 0 2.3 2.2 4.5 6.7 4.5 5.4 0 8.2-3 8.2-5.9C27.3 27.9 26 26.9 24.6 25.7zM20.5 22.1c-2.7 0-3.9-3.5-3.9-5.6 0-0.8 0.2-1.7 0.7-2.3 0.5-0.6 1.4-1 2.2-1 2.6 0 3.9 3.5 3.9 5.8 0 0.6-0.1 1.6-0.8 2.3C22.2 21.7 21.3 22.1 20.5 22.1zM20.6 34.7c-3.3 0-5.5-1.6-5.5-3.8 0-2.2 2-3 2.7-3.2 1.3-0.4 3-0.5 3.3-0.5 0.3 0 0.5 0 0.7 0 2.4 1.7 3.4 2.5 3.4 4.1C25.2 33.2 23.6 34.7 20.6 34.7z"></path>
<polygon fill="#333333" points="32.5 22.1 32.5 18.9 31 18.9 31 22.1 27.9 22.1 27.9 23.6 31 23.6 31 26.8 32.5 26.8 32.5 23.6 35.7 23.6 35.7 22.1 "></polygon>
</symbol>
Jeff Jacobson-Swartfager
15,419 PointsAh ha! Sweet! Thanks for the update!
Jeff Jacobson-Swartfager
15,419 PointsJeff Jacobson-Swartfager
15,419 PointsAh, got it.
SVG sprite maps aren't supported in IE8 either (or Safari 5, iOS 4.3, or Android 2.3).
However, svg4everybody should help you get around those limitations. It uses some javascript to get the
svg
anduse
elements working. You're going to want to provide a png fallback for IE8, and svg-sprite can help you automate that.Have fun!