Stretch SVG background image?

Question

It's easy to stretch a png background image:

.stretched-logo-bg {
    background: url("../img/curve.png") center center no-repeat;
    background-size: 100% 100%;
}

this won't work with an SVG background though

.stretched-logo-bg {
    background: url("../img/curve.svg") center center no-repeat;
    background-size: 100% 100%;
}

it won't get stretched, it will maintain its aspect ratio and just center.

At least in Chrome 52

Answer 1

If you need to override the preserveAspectRatio of the SVG you are displaying you can use an SVG fragment identifier to do that e.g.

.stretched-logo-bg {
    background: url("../img/curve.svg#svgView(preserveAspectRatio(none))") center center no-repeat;
    background-size: 100% 100%;
}

Answer 2

I don't believe that you can make a SVG to distort like you can with PNGs.

However, if you are mostly supporting modern browsers, you can add preserveAspectRatio="none" attribute to the SVG tag.

For example:

<svg version="1.1" preserveAspectRatio="none" .. etc`