Last Updated: February 25, 2016
·
9.978K
· robsonsobral

background-size and SVG

If the background-size you want to use on a SVG background-image doesn't respect its aspect ratio, you need to set the parameter preserveAspectRatio to none on the SVG root element.

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" preserveAspectRatio="none">
[...]

This way, you can stretch or shrink the background just on one dimension by css:

#foo {
    background-size: 100% 3em;
}

Neither Firefox or Internet Explorer respect preserveAspectRatio on backgrounds, but WebKit does. So, the parameter is needed.