Cannot Stretch Svg Background Image, Aspect Ratio Will Be Preserved

Cannot stretch svg background image, aspect ratio will be preserved

You should add

<svg preserveAspectRatio="none">

to your SVG.

MDN Reference Link

<none>

Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.

Stretch SVG background image?

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%;
}

Stretch svg background without keeping aspect ratio

Solution:

Open the svg file in a text editor and add this attribute:

<svg preserveAspectRatio="none"

Ignore SVG aspect ratio and stretch to 100% window size

You can simply add preserveAspectRatio="none" to SVG if you don't care about aspect ratio. And setbackground-size: 100% 100%; in the CSS.

Example:

html {  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'%3E%3C/path%3E%3C/svg%3E") center / 100% 100% no-repeat;  height: 100%;}

SVG Background image not stretching horizontally cross-browsers

In my FF browser, it works if you change background-size: 100% to background-size: 100% 100%. This property takes two arguments, width and height, and sets height to auto if not provided. I guess that, depending on the version, you may need to set -moz-background-size.

Make background image cover div by stretching, not maintaining aspect ratio

Turns out there was also a problem in the actual svg.
The solution below:

div {
  position: relative;

  &:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
}

I removed the height and width parameters from my svg and also added: preserveAspectRatio="none"

SVG image won't preserve its aspect ratio with max width / height set

1. You need to use a viewBox - as a since-deleted answer suggested.
2. You are being misled about what's happening because you are using background-color: green on the <svg>.

SVGs behave differently from bitmap images like PNGs. The <svg> can grow to the size of the container, but the contents of the SVG will be scaled to fit that container.

Example

svg {
  max-width: 100vw;
  max-height: 100vh;
  background-color: green;
}

<svg width="100%" height="100%" viewBox="0 0 1280 1920">
  <rect width="1280" height="1920" fill="red"/>
</svg>

SVGs not scaling properly in IE - has extra space

As you have discovered, IE has a bug where it doesn't scale the SVG properly if you don't provide both the width and height.

To get it working in IE, you can use a trick discovered (?) by Nicolas Gallagher.

http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/

The trick uses a <canvas> element. IE does properly scale canvas elements. So if you place one in the <div> with the SVG, the SVG will end up the correct size. You just need to give the canvas the same aspect ratio as your SVG.

<div style="position:relative;width:100%;background:blue;">
  <canvas width="254" height="108"></canvas>
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
    <use xlink:href="#mys"></use>
  </svg>
</div>

with CSS

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

canvas {    display: block;    width: 100%;    visibility: hidden;}
svg {    position: absolute;    top: 0;    left: 0;    width: 100%;}

<svg style="display:none;"><defs><symbol id="mys">    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3        c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9        C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7        l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5        c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1        c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8        c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6        s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z         M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9        s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3        S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/></symbol></defs></svg><div style="position:relative;width:100%;background:blue;">  <canvas width="254" height="108"></canvas>  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">    <use xlink:href="#mys"></use>  </svg></div>

---

Related Topics