SVG used for background images in CSS generally works pretty well. IE however has some weird sizing behavior of the rendered size of the SVG graphic that can bite you if you’re not careful.
Here's what you need to know:
- IE before the latest "Edge" version (that can be tested as a technical preview right now) miscalculates the intrinsic dimensions of SVG images used as backgrounds, unless they have both
heightattributes set, or matches the aspect ratio of the element they are applied to. For example, the problem may not be there if you're using a square background image for a square element representing an icon, or a standing rectangle graphic for an element of the same shape.
- IE11 is slightly better in that it doesn't distort the aspect ratio of the graphic: IE9-10 however will mysteriously skew stuff. More on that later.
- If you only set one dimension using
background-sizeand the other to
auto, IE will choose the aspect ratio of the element rather than the intrinsic dimensions of the SVG graphic.
Calculating how background-size and SVG works together is complex. Like, really complex. Once you get to know the
preserveAspectRatio attributes a little bit, it makes more sense though, and for the most part modern browsers react as expected.
I found a while ago that IE behaved oddly in terms of sizing, and that the
height attributes were needed for the background, unless the aspect ratio of the SVG matched those of the element perfectly. I couldn't figure out what the exact nature of the bug was though, as background images tended to get wider the narrower the element got, and narrower the wider it got. Conversely they got shorter the taller the element was, and taller as the element got shorter. In IE 9-10, the size of the canvas that the SVG gets drawn on usually gets sized correctly if
background-size is set to specific measurements, but the rendered graphic inside it gets skewed, leaving transparent gaps on the sides. I couldn't find any combination of
preserveAspectRatio that fixes this.
As an added bonus, if you only set one dimension of the background image, like
background-size: 100px auto, the background image is sized not according to the dimensions inside the
viewBox of the SVG graphic, but rather the aspect ratio of the element in its entirety.
As mentioned at the beginning of the post, the simple fix is to use explicit
height attributes directly on the SVG element in the source graphic, matching the aspect ratio of the image, and you can size it perfectly with
background-size. I was hoping to have a cool mathematical explanation of what sizes the rendered graphic, but I'm just not talented enough at math to do it – it seems to react to a combination of width, height, background image sizing and aspect ratio of the element. There's just too many factors involved (or I'm just too slow to figure it out).
I set up a JSBin demo with loads of variations. Play around with it in IE to see the bug in action.