SVGfall Speed edition (V2)
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/
Size and delivery
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.
Markup pattern and explanation
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 the
- 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 the
srcattribute and change it for
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.