SVG rendering doesn’t always work as expected. To output a vector graphic as pixels on a display, browsers need to rasterize the image, sometimes not resulting in the level of quality you would expect from a graphics standard like SVG, which theoretically supports scaling to arbitrary sizes.
IE11 sometimes produces blurry output when using scaled SVGs as CSS background images. This is readily apparent with SVG icons that should have sharp edges.
It is possible to scale a background data SVG using
background-size: 100% or
background-size: cover. This works perfectly well as long as the background image’s containing element has an integer height and width.
What roesn’t work
I’ve narrowed it down to this: IE11 blurs SVG background images when they are scaled to a size whose computed pixel height or width is not an integer value. The problem isn’t about the SVG’s intrinsic size, but the size the SVG is being scaled to — particularly, whether that target size is a whole number or not.
Because I develop the majority of my layouts using rem units, needing to handle computed pixel values that aren’t whole numbers is a fairly common occurrence. There is an easy workaround: size the background image manually so that it renders to a clean, whole number value that IE can handle. There’s also another solution.
The simplest solution I’ve implemented to solve this blurry SVG issue is convincing the browser to rasterize the SVG at a larger size, then scale down the output using a CSS transform. After transforming the element, use a negative margin to make it fill the same space as before. This is needed because CSS transforms don’t affect an element’s impact on its surroundings.
The result is a SVG at exactly the size you want and free from IE11’s SVG rendering fuzziness.
I’ve put together a CodePen demonstration of the CSS required for this solution:
Exploring responsive grid systems for complex but structured layouts.
Using the flag or media pattern for locking up graphics and text for comments, alerts, and more.
A hidden element within a link can stretch the link’s focus outline to the edge of the viewport — and beyond.