Sadly this issue doesn’t have a solution (that I’m aware of). Seems that IE10 doesn’t re-render SVGs set as background elements in CSS correctly when zoomed.
For those wondering why their beautiful SVG looks great everywhere else and like a bears arse in Internet Explorer 10, this may provide some (slight) comfort.
Internet Explorer 10 (e.g. as shipping on the Microsoft Surface) is able to render SVGs as images within
<img> tags as you would expect; zoom in and the image stays nice and crisp (presumably the browser is constantly re-rendering the SVG as the user zooms).
However, if you set the SVG as a background element, it seems that IE rasterises the SVG and then does not re-rasterise it if the user zooms the page. Does this matter? Ordinarily, not so much, but now Microsoft has the Surface…
If looking at elements with an SVG background on Internet Explorer on a device with any kind of zoom (Windows 8 phone or MS Surface for example) the background looks frankly, horrible. It stays looking like a bitmap image instead of re-rendering to be sharp.
At this point it seems this is simply a ‘feature’ of Internet Explorer 10. Which is shame, especially given the lip-service MS was giving IE regarding SVG support as far back as IE9:
It’s obviously a shame that when Microsoft is blowing its own trumpet about the HTML5 and CSS3 features it supports (and honestly the breadth and depth of supported features in IE10 is to be applauded), it’s failed in such an obvious manner elsewhere. Hopefully a future update will fix this.
In the meantime, here’s a test case at CodePen. Take a look at that on your Surface/Windows 8 phone and see if you get the same issue (first image is an SVG as a background in CSS, second one is an SVG within an <img> tag):
Until then, resolution independent graphics in Internet Explorer backgrounds are not resolution independent. And that’s a shame.
After asking the question on Stack Overflow, I was pointed in the direction of David Bushell’s post on the subject. His recommendation with Firefox (that also rasterises the SVG in CSS background at present) is to upscale the image:
By upping the container size and resizing all points by a factor of 10 (or even 100) I can ensure rasterisation at much large sizes. This can even be done by applying a transform like
transform="scale(100,100)"to the group, thus avoiding longer points like 500, 829.2 that would bloat file size — nifty!
It makes sense that this same technique could be applied to IE10 but it is not without cost. As David notes:
Browsers that have implementations like Firefox will be forced to rasterise SVG files on canvases far bigger than required. Bitmap data takes up a lot of memory. This workaround doesn’t come free of charge.
This problem may not be such a big deal on desktop systems but I’d expect it to cause problem on a lot of handsets where memory allocation is a premium.