An SVG fallback for your HTML5 and CSS3 responsive web site designs using Modernizer

There are still some browsers out in the wild that do not support the .svg file format. Some browsers will support in-line images and not in a CSS background image.

Browsers that do not support in-line .svg images are:

ie6 – ie8
Android 2.1 – 2.3
Safari 3.1
Firefox 2.0

Browsers that do not support .svg CSS background images:

ie6 – ie8
Android 2.1 – 2.3
Safari 3.1
Firefox 2.0 – 3.6
Opera 9.0

Some browser versions support them but display them a bit pixelated when scaled. Have a look at this chart to see what browser versions are partially supported using CSS and this chart for in-line images.

So we need a fallback to make sure every user gets the same UX – User Experience. We will be relying on Modernizer.js to help us out. You can follow these instructions on how to install modernizer and get started.

Once you get Modernizer installed you can add the following jQuery snippet to change all of your inline .svg images to .pdf images in browsers that do not support .svg.

$( document ).ready(function() {
	$(function() {
		/*SVG to PNG if browser does not support it*/
		if(!Modernizr.svg) {
			$('img[src*="svg"]').attr('src', function() {
				return $(this).attr('src').replace('.svg', '.png');
			});
		}
		/*eof SVG to PNG*/
	});

});

Next we will tackle the CSS background images. This one is simple because you only have to make a no-svg class for your background image.

.image { background:url(img/some-image.svg) center center no-repeat; }
.no-svg .image { background:url(img/some-image.png) center center no-repeat; }

When Modernizer runs on the page it adds a bunch of classes to the <HTML> tag and one of those classes is either svg or no-svg so all we have to do is target the no-svg class like I did above in the CSS and display the .png image. give it a try!

Our thoughts and experiements