Stretch Svg Background Image

How do I scale an SVG background-image without honoring aspect ratio in Firefox?

I needed to set the background-size. This snippet did the trick:

background-size: 100% 100%;

Part of the "stricter rendering model" was deferring sizing information to the page, rather than intrinsically within the SVG.

I thought I was defining this inside the background shorthand, but apparently instead I was specifying the background-position. I feel pretty silly about that, but it does appear to be the gnarliest and most-overgrown shorthand in CSS.

Stretch a background image (SVG) to 100% width and 100% height?

Using background-size: 100%; actually means background-size: 100% auto;. Use both width and height values: background-size: 100% 100%;

Using a width value only, in which case the height defaults to auto.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax

.container {   background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");   background-position:center center;   background-repeat:no-repeat;   width:300px;   height:180px;   background-color:#eef;   border-bottom:1px solid #000;}
#container1 {  background-size:contain;}
#container2 {  background-size:cover;}#container3 {  background-size: 100% 100%;}

<div id="container1" class="container"></div>
<div id="container2" class="container"></div>
<div id="container3" class="container"></div>

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.

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.

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"

CSS: scale background SVG in only one direction

So I tried around and found a possibility:

1. in Inkscape or in a text editor, set the following viewBox according to the size of your image – so if your image is 100*20px set it like this: viewBox="0 0 100 20"
2. in a text editor, add preserveAspectRatio="none" to the SVG tag
3. also, in the SVG tag set the height and width in percents: width="100%" height="100%"
4. in the CSS markup, then simply use background-size: 100% 20px;

With these steps it is possible to scale the background SVG using CSS in the same way that one would scale any bitmap image.

How do I stretch a background SVG so it always fills a div via CSS?

You need to change the way the SVG scales when it is rendered as an image.

Open up your SVG file and add the following attribute to the root (ie outermost / first) <svg> tag in the file.

preserveAspectRatio="none"

If there is already a preserveAspectRatio attribute there, then change it's value to "none".

---

Related Topics