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

CSS

My SVG is not rendering right in Internet Explorer. Every other browser shows it just right.

Hi, I have a page http://konstantin.fi/ made mostly with SVG code. It works just fine in all browsers BUT Internet Explorer (Surprise surprise >_<).

Would you happen to have any idea why IE is rendering the Choose your Konstantin SVG elements badly? The element is supposed to fit into your screen like in this screenshot: https://ibb.co/ia3RSw but insted the IE render it very small, like this (which is wrong): https://ibb.co/fxVC0G

2 Answers

Andrew Hale
Andrew Hale
10,925 Points

It really depends what version of IE you are seeing the issue on. SVG is supported from versions 9+, with the caveat that versions 9-11 scale SVG's incorrectly.

Here's a useful site that let's you know what is and isn't supported by different browsers.

The site suggests that...

adding height, width, viewBox and CSS rules seem to be the best workaround.

So you could reformat your code to incorporate this advice.

Ultimately a relatively small amount of people use these versions of IE, and as Vladimir posted, support for them has ended.

If, however you would still like to fix this issue, you could resort to an old IE hack that targets IE10+ with a media query.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* your code goes here */
}