A fast way to use SVG images with a reliable fallback, based on the Picturefill syntax using imgs, for downloading fallback assets only when needed.
- Author: Agustín Amenabar (c) 2014
- License: MIT/GPLv2
Demo URL: http://baamenabar.github.com/svgfall/
Currently, svgfall-v2.js compresses to around 458bytes (~0.44kb), after minify and gzip. To minify, you might try these online tools: [Yahoo Compressor]:(http://refresh-sf.com/yui/), or Closure Compiler. Serve with gzip compression.
Mark up your SVG images like this.
<img src="external/imgs/Octocat.svg" data-svgfall alt="The Octocat, the Github mascot">
<noscript><img src="external/imgs/Octocat.png" alt="The Octocat, the Github mascot"></noscript>Notes on the markup above...
- You just need to add
data-svgfalldata attribute to theimgelement. - The script only kicks in when svg support fails.
- The script will try to look for an explicit alternative stored in the
data-fallbackdata attribute, if it doesn't find the attribute, it will change the.svgextension in thesrcattribute and change it for.png - The
noscriptelement wraps the fallback image for non-JavaScript environments, and including this wrapper prevents browsers from fetching the fallback image during page load.
Markup for explicit alternative:
<img src="external/imgs/Octocat.svg" data-svgfall alt="The Octocat, the Github mascot" data-fallback="external/imgs/Octocat.jpg">
<noscript><img src="external/imgs/Octocat.png" alt="The Octocat, the Github mascot"></noscript>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)
The original script can be found on the V1 branch and is recomended when an important portion of your userbase is on IE8 and old Androids with low connection speeds. This current version favours the speed for supporting browsers.