Using SVG Images In Responsive Websites With A Fallback For Browsers Not Supporting SVG

By Neal Grosskopf, Software Engineering Director

Published: April 28, 2014

With the advent of mobile devices that have high pixel density displays, there’s now a need to ensure the images used on sites look good on these devices. One method is to provide multiple versions of the same rasterized image. Another, more future-proof method is to use vector images that can scale to any size needed. Scalable Vector Graphics, or SVG for short are currently the best solution for this on websites.

Above is an screenshot from a high pixel density phone showing a vector SVG file vs. a raster PNG. The image on the left is a SVG while the one on the right is a PNG. Notice how much crisper the left image looks? Another bonus to using the SVG image is it can now be resized infintely while maintaining clarity. The PNG on the other hand will start to look fuzzy as its size goes beyond its default size.

Referencing SVG Images In Browsers That Support SVG

SVGs can be referenced like any other image format when used with the IMG element:


<img src="image.svg">

Providing a Fallback For Browsers That Do Not Support SVG

Some older browsers do not support SVG. Because of this, a fallback mechanism is needed. This is accomplished via the onerror attribute. The only downfall of this is browsers that do not support SVG will end up downloading two images while only showing one. The vast majority of browsers will not have this issue.


<img src="image.svg" onerror="this.src='fallback.png';this.onerror=null;">

Attributes Within The SVG File

There are three important attributes within a SVG file that assist in helping it be responsive. The first two are the height and width attributes. These set a default size for the image should one not be supplied in HTML or CSS. See below for a caveat to using these. The viewBox attribute positions the SVG layers on the canvas. This can be used to crop the image if needed.


<svg
...
height="382"
width="335"
viewBox="0 0 335 382">

When exporting the SVG from Adobe Illustrator, there is an option to make the SVG ‘responsive.’ I’ve found that when checking this, it will remove the height and width attributes from the the SVG file. While this would normally seem like a desirable thing, I found during testing, that iOS 5 has a major bug when SVGs do not have a height and width attribute placed in the SVG file. If you don’t need to support iOS 5, then it’s fine to remove these attributes.

Making SVG Images Responsive


img[src$=".svg"][onerror] { width: 100%; }

The above CSS will force all SVG images to fill the size of their containing HTML element.


img[src$=".svg"][onerror] { max-width: 100%; }

The above CSS will allow the image to stay at its natural size, defined by the height and width attributes in the SVG root element. Once the browser’s viewport has become smaller than the SVG’s defined width, the image will begin to shrink proportionately.

Browser Support

Browser support current stands at 85% (based on caniuse.com statistics). The most popular browsers that do not support SVG are Internet Explorer 8 and under and the stock Android 2.3 browser and under.