Easy SVG Fallbacks and Modernizr

5 October 2014

SVG comes as an image that's not only small in file size but also looks great at any image size too! It's really no wonder why it's became so popular for the web.

Due to being vector, SVG Is nothing like the traditional PNG and JPEG files (which can start to pixelate at certain sizes) instead SVG works on a mathematical basis. But with SVG comes a downside, not all browsers support it and therefore we must provide a fallback for those users who use browsers below:

  • IE 9
  • Chrome 31
  • Firefox 31
  • Safar 5.1
  • Opera 24
  • Android 4
  • iOS Safari 7.1

One of the best ways to detect support for SVG is by using Modernizr which will allow you to perform fallback detection easily. For this tutorial, I shall be using the following Modernizr code. This will simply just look for SVG support within the browser:

JS
/* Modernizr 2.8.3 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-svg-cssclasses
 */
;window.Modernizr=function(a,b,c){function v(a){j.cssText=a}function w(a,b){return v(prefixes.join(a+";")+(b||"))}function x(a,b){return typeof a===b}function y(a,b){return!!~("+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}var d="2.8.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={svg:"http://www.w3.org/2000/svg"},n={},o={},p={},q=[],r=q.slice,s,t={}.hasOwnProperty,u;!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.svg=function(){return!!b.createElementNS&&!!b.createElementNS(m.svg,"svg").createSVGRect};for(var A in n)u(n,A)&&(s=A.toLowerCase(),e[s]=n[A](),q.push((e[s]?":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)u(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?":"no-")+a),e[a]=b}return e},v("),i=k=null,e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):"),e}(this,this.document);

By using Modernizr you can easily display an alternative background-image in CSS, using the following code:

CSS
#box
{
	background-image:url("sample.svg");
}
.no-svg #box
{
	background-image:url("sample.png");
}

What about inline images?

Thankfully by using Modernizr, we can write the following block of code:

JS
window.onload = function(){
	if(!Modernizr.svg){ //Modernizr SVG detection
		var images = document.getElementsByTagName("img"); //get all img tags
		for(var i = 0; i < images.length; i++){
			var hasFallback = images[i].getAttribute("data-svg-fallback"); 
			if(hasFallback){ //if data-svg-fallback exists
				images[i].setAttribute("src", hasFallback); //replace src with fallback
			}
		}
	}
}

These lines of code allow you to add a simple fallback straight into your img tag. Now you can use the following HTML:

HTML
<img src="sample.svg" data-svg-fallback="sample.png"/>

The data-svg-fallback is your fallback (PNG/JPG) image and the original SRC is your SVG file, it's that simple!
This fallback should work for near enough all browsers that allow the "data-"attribute (which is supported as early as IE 5.5 and Chrome 4).

So that's it, be prepared to start using slick SVG images in your websites and applications!

Comments

comments