How does one make a SVG background that stretches rather than tiles?

Question

I have a SVG background I want to use, and I can't figure out how to make it stretch over the whole page, let alone be a background. Could someone help?

(The W3Schools pages, on both SVG nor on backgrounds, gave me nothing).

<object data="background.svg" type="image/svg+xml" width="100%" height="100%"> does not exactly work.

Lupulin

Do you have any existing code? – Phrenic

Answer 1

I think you are asking if you can make the SVG to distort and stretch like a PNG would do. This is unfortunately not impossible unless your SVG codes themselves are set up that way (say if your SVG are generated by illustrator, they simply won't do it).

The only way to do it at the moment is to hand code the SVG. For example, instead of drawing a diagonal line with a set angle you can tell the SVG to connect top left corner to bottom right corner. If you have the SVG, I might be able to tell you how to hand code it. (If your SVG is complicated like Phrogz's tiger, it likely won't be possible...)

Also for most modern browsers, you can simply add preserveAspectRatio="none" attribute to the svg tag. If you have .svg files, you need to open the file with sublime text and add the code to the svg tag (something like <svg version="1.1"...(hundreds of lines of codes followed) and you will make it <svg version="1.1" preserveAspectRatio="none"...(hundreds of lines of codes followed).

Fraternize

Perfect! This solved my problem, and directly addresses the OP's question. – Nickey

@Aero can you provide any references to help describe what you mean by "tell the SVG to connect top left corner to bottom right corner"? – Serrano

@DavidCook he simply means that you can draw a line from one corner to another on the document – Giorgi

I agree with @Paul Beck - Thank you! For real. – Choreography

If you are using Inkscape and save it as "Plaing SVG" it seems to add the "preserveAspectRatio" parameters (Inkscape SVG was not stretching). – Clarkson

TFW you search for the solution and you find it on SO, and you already upvoted it, probably years ago. 🤦‍♂️Would upvote twice if it was possible. – Raynata

Answer 2

I just figured it out. On your <svg> tag you need to:

• remove the width and height properties ex: width="375" height="137"
• add this property preserveAspectRatio="none"
• add the viewbox property (containing your original width and height that you just removed viewBox="0 0 375 137"

In your css file on the element that contains your svg background:

• add the property: background-size: 100% 100%;

The key issue for me was that my svg file didn't contain the viewbox property.

Welltimed

preserveAspectRatio="none" is enough – Bekah

I had to remove width and height, otherwise it wouldn't work. So I have to add preserveAspectRatio="none"and remove width and height. – Bet

Thanks, this is GOLD – Desperado

Answer 3

You want the CSS3 background-size property:

div {
  height:200px;
  background:url(my.svg);
  background-size: 100% auto; /* Fill width, retain proportions */
}

Demo: http://jsfiddle.net/JknDr/1/​​

If you want it to scale non-proportionally to fill the container (so the background stretches and squashes) then use background-size: 100% 100%.

Maite

I don't think that's what OP is asking. He wants the SVG to distort and stretch like a PNG would do. – Fraternize

SVGs don't stretch out of their aspect ratio the way other image types will unless you use Aero Windwalker's solution below. Otherwise, for an SVG, background-size: 100% 100% behaves like background-size: contain. – Nickey

Well I was able to get it working with the other answer. By applying preserveAspectRatio="none" to the <svg> tag in the file, setting it as the background image, and setting background size to 100%, it stretches. How is that not stretching like a PNG? – Wembley

The OP asks "how to stretch" and your answer is "how to avoid stretching". Something is not right here :D – Mash

Needed this for a background-image SVG I had that displayed fine in Chrome, Edge and IE11, but was tiled in Firefox. Thanks. – Humbug

Answer 4

I found that Illustrator was adding xml:space="preserve" to my SVG which was preventing the background image from stretching to fit the space. I see that this has been deprecated; however, Illustrator is still adding it. Once I changed that attribute to xml:space="preserve" and added preserveAspectRatio="none" the image scales as intended.

Incredible

xml:space is about preserving whitespace within text nodes. It has nothing to do with whether a background image stretches or not. The final sentence about preserveAspectRatio is correct but is already given in the other answers. – Megasporophyll

I don't pretend to fully understand "why" it worked. I'm just letting others know that until I changed this attribute, the SVG I'm working with would not stretch. All other answers to OP wouldn't work for me so I posted the answer that worked for me. I still hope it helps someone even though you've downvoted it. – Incredible