Intrinsic Ratios and SVGs

This week I came across an interesting design problem: how do you make an SVG that’s being used as a background-image respond to the width of its container, yet also scale its height depending on the child elements within?

For example this could be a strange shape that might be difficult or impossible to emulate with CSS and appears behind content that fluctuates; buttons, long columns of text or titles that break onto multiple lines. We want that background image to stretch horizontally to the width of the viewport but also stretch vertically depending on the content that will likely change inside.

But if you simply attach an SVG background image to an element and remove its dimensions within the file then the image will scale its height and width proportionately – this likely means that the edges of the image will be cut off from view but also means that any extra content we might want to add in the future simply won’t fit.

The fix is easy enough though; open up the SVG in a text editor and add preserveAspectRatio="none" to the SVG element itself whilst also making sure to remove all width and height parameters that might have been automatically set by an app such as Illustrator. I’ve hooked up a quick example of this on Codepen, and it seems to work relatively well across various browsers. Remember though that this is obviously only suitable for browsers that support SVG, but with Modernizr we can test for this and give them appropriate fallbacks.

But what about serving these SVGs only to browsers that can support them? Well…that’s another issue altogether.