svgFallbacks.js - offer png fallback for inline svg - uses Modernizr

gistfile1.txt

/*!
* svgFallbacks.js
* Author: Joe Watkins - joe-watkins.io
* Requires - Modernizr for inlinesvg test
* Usage:
*   1. add a class to <img> eg.
*      <img class="svg" src="path/file.svg">
*
*   2. add png fallback for older browsers via data attribute
*      <img class="svg" src="path/image.svg" data-svg-fallback="/path/image.png" alt="cool icon">
*
*   3. target these images with plugin $(".svg").svgFallbacks();
*
*/
(function($){

    $.fn.svgFallbacks = function(options) {

        var defaults = {
          wrapper: this,
          fallbackDataAttr : "svg-fallback"
        }

        var options =  $.extend(defaults, options);
        var o = options;

        var svgSupport = Modernizr.inlinesvg,
            $svgIcons = $(o.wrapper);

            if(!svgSupport){
              $.each($svgIcons, function(){
                $(this).attr("src",$(this).data(o.fallbackDataAttr));
              });
            }


    };

}(jQuery));