Update: Code the People have created a WordPress plugin, called SVG to PNG, which does the same thing, but also converts your images for you automatically.

SVG images are becoming very popular on the web these days. They offer infinite resolution and can provide extremely small file sizes. Unfortunately, older browsers such as IE8 do not support SVG files. To work around this problem, we need to provide a fallback system.

Thankfully, Todd Motto has created a very convenient JavaScript for dynamically changing SVG image URL’s to PNG’s. As long as you have a PNG file with exactly the same name as the SVG file, then the correct file will be served to your visitors.

function supportsSVG() {
	return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
	var imgs = document.getElementsByTagName('img');
	var dotSVG = /.*\.svg$/;
	for (var i = 0; i != imgs.length; ++i) {
		if(imgs[i].src.match(dotSVG)) {
			imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
		}
	}
}

For those of you using WordPress, you may have noticed that it won’t allow you to upload SVG files by default. The following class can be used to provide SVG support in WordPress and can be used to load the JavaScript file too. This class can be included in themes or plugins (you may need to change the file location).


 */
class Prefix_SVG_Fallback {

	/*
	 * Class constructor
	 */
	public function __construct() {
		add_action( 'init', array( $this, 'script' ) );
		add_filter( 'upload_mimes', array( $this, 'allow_svg_uploads' ) );
	}

	/**
	 * Enqueue the script
	 */
	public function script() {
		wp_enqueue_script( 'svg-fallback', get_template_directory_uri() . '/js/svg-fallback.js', array(), '1.0', true );
	}

	/*
	 * Add SVG to the available uploads 
	 */
	public function allow_svg_uploads( $existing_mime_types = array() ) {
		$mime_types[ 'svg' ] = 'image/svg+xml';
		return $mime_types;
	}

}
new Prefix_SVG_Fallback();

Hopefully this has been useful to some of you 🙂