SVGfall

A fast way to use SVG images with a reliable fallback, based on the Picturefill syntax using divs, for downloading only one asset.

• Author: Agustín Amenabar (c) 2012
• License: MIT/GPLv2

Demo URL: http://baamenabar.github.com/svgfall/

Size and delivery

Currently, svgfall.js compresses to around 541bytes (~0.53kb), after minify and gzip. To minify, you might try these online tools: [Uglify]:(http://marijnhaverbeke.nl/uglifyjs), [Yahoo Compressor]:(http://refresh-sf.com/yui/), or Closure Compiler. Serve with gzip compression.

Markup pattern and explanation

Mark up your SVG images like this.

	<div data-svgfall data-alt="An Octocat, typical mascot of Github">
		<div data-src="external/imgs/Octocat.svg" data-support="svg"></div>
		<div data-src="external/imgs/Octocat.png" data-support="no-svg"></div>

		<!-- Fallback content for non-JS browsers. -->
		<noscript>
			<img src="external/imgs/Octocat.png" alt="An Octocat, typical mascot of Github">
		</noscript>
	</div>

Explained...

Notes on the markup above...

• The div[data-svgfall] element's alt attribute is used as alternate text for the generated img element.
• The div[data-svgfall] element must have 2 source elements, one for SVG support one for the absence of support.
• Each div[data-src] element must have a data-src attribute specifying the image path.
• The div[data-support] tells the script which source is the svg and wich one is the fallback.
• If the div[data-support] is not provided the script will try to infer the type of file from the file extension, if found.
• The noscript element wraps the fallback image for non-JavaScript environments, and including this wrapper prevents browsers from fetching the fallback image during page load (causing unnecessary overhead). Generally, it's a good idea to reference the fallback image here, as it's likely to be loaded in older/underpowered mobile devices.

Image size

As you may sometimes want to control the image size in the markup you can set the image size as an additional data attribute.

	<div data-svgfall data-alt="An Octocat, typical mascot of Github" data-width="350" data-height="350">
		<div data-src="external/imgs/Octocat.svg" data-support="svg"></div>
		<div data-src="external/imgs/Octocat.png" data-support="no-svg"></div>

		<!-- Fallback content for non-JS browsers. -->
		<noscript>
			<img src="external/imgs/Octocat.png" alt="An Octocat, typical mascot of Github">
		</noscript>
	</div>

Support

SVGfall supports a broad range of browsers and devices (there are currently no known unsupported browsers), provided that you stick with the markup conventions provided. (based on picturefill's claim)

Further development or deployment

This is easy to implement, pretty clean but it could be taken even further like some of the following implementations:

• Render the fall-back PNG from the SVG on the server, cache it and serve that. For this to work you need ImageMagik which is not a default library on most shared servers with PHP, but it's pretty straight forward.
• Check for support once, store a cookie, and replace the complicated markup to a regular image once you know if the device supports SVG or not.
• We could also test for WebP support.