Like a lot of others in the front-end community I’ve really begun to prefer SVGs over icon fonts and/or image sprites for accomplishing designs. They offer some amazing features and feel cleaner, more robust than using fonts. But, if you’re new to SVG, sometimes they just seem to behave, well, unexpectedly. Usually, it’s just ignorance in regards to how SVGs work that causes all the frustrations and this case isn’t any different.

The issue I ran into, recently, was when I was attempting to use an SVG as a CSS background-image, that I had intended to fill background completely, even if it meant stretching and changing the aspect ratio of the SVG. Turned out that was trickier than I’d anticipated and I had to figure out which attributes needed to be changed in my SVG to make it happen. So, if you ever need an SVG to scale non-uniformly, here’s how.

Creating an SVG without an aspect ratio

I’ve created my SVG in Illustrator. To keep things simple, I’ve drawn it on an art board that’s 100px by 100px. These dimensions, ultimately, will be meaningless. When saving the SVG, ignore all the options in the dialogue menu as the default will be perfect, then choose “SVG Code…” to copy the code directly. Next you’ll want to paste the code into your text editor of choice since we’ll be modifying some of the attributes.

Optimize the SVG

Really quickly, lets strip out some of the unnecessary information that Adobe adds to our file. Notice the first three lines: <?xml ..., <!-- Generator: ... and <!DOCTYPE .... These three lines are unnecessary for our SVG to work, so remove them. You should be left with something like this:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
...

Removing the fixed height and width

First attributes to change are the width and height. Since I drew the shape on a 100px by 100px art board, those dimensions have been exported, and we need to change them to percentages to make the SVG fluid, or responsive. So go ahead and find those two attributes in the SVG element and give them the dimension of 100%:

width="100%" height="100%"

See the Pen oBlKb by J Scott Smith (@jscottsmith) on CodePen.

What this will do is allow the SVG to fill the container. It will now automatically scale the width of the container, and will scale uniformly when the container size is changed. So it’s preserving the original aspect ratio, which in this case, is not what we want. See the demo above. You can resize the browser to see it scale.

Prevent uniform scaling

Now the important part, and where I found myself stuck. In order to prevent the uniform scaling of our SVG graphic we need to add the preserveAspectRatio attribute with the value of "none". Read the spec on it here. This attribute isn’t in the SVG we exported, so lets add it after all the attributes on the SVG element:

preserveAspectRatio="none"

See the Pen Cfjqv by J Scott Smith (@jscottsmith) on CodePen.

Now our SVG will scale to fit our container, but will no longer preserve it’s aspect ratio. Cool. You can save this file now, and use it as a CSS background-image with no problems. Just make sure to set the background-size to 100% if you want it to always fill to the edges. Additionally, you could limit the height or width to a fixed value, and leave the remaining value a percent, so that it’s fluid on either the x or y axis.

The final SVG file: No Aspect Ratio

Most likely you’ll never want to have an SVG scale without preserving it’s aspect ratio, but now, when that rare occasion occurs, you can.