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 trial

Development Tools Introduction to Front End Performance Optimization Combine and Minify Assets Create a Sprite Map

Posted by Michael Trilford
Michael Trilford
7,232 Points

Turns 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
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

Ah, 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 and use elements working. You're going to want to provide a png fallback for IE8, and svg-sprite can help you automate that.

Have fun!

Michael Trilford
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

Yeh, 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
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

If only you can vote the reply as the best answer :-) Thanks

Michael Trilford
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

Actually, it works still. ( Removed post. )

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

I'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
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

Yup, 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
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

You 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
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

Yeh, 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
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

In 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
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

Since 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
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

Update!

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>