SVG images with a reliable fast fallback to regular images. Based on Picturefill and Modernizr.
A fast way to use SVG images with a reliable fallback, based on the Picturefill syntax using img
s, for downloading fallback assets only when needed.
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...
data-svgfall
data attribute to the img
element.data-fallback
data attribute, if it doesn't find the attribute, it will change the .svg
extension in the src
attribute and change it for .png
noscript
element 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.