Support SVG in older browsers with PNG fallbacks

By Dane Troup
User Interface Designer, former Fynyddian

Some older browsers like IE8 and old Android browsers don't support the use of SVG images so its a good idea to detect the support with Modernizer and use a PNG (Portable Network Graphic) as a replacement. Yes, this means for every SVG a companion PNG file will need to be created. I've come to make it part of my process to save a PNG with my SVGs.

Javascript

Add this to the bottom of every page.

if(!Modernizr.svg){
    $('img[src$=".svg"]').attr('src', function () {
        return $(this).attr('src').replace('.svg', '.png');
    });
}

The javascript will utilize Modernizer to detect the support for SVG. If its false the image references like "image-name.svg" will be changed to "image-name.png".

Note

  1. Make sure companion images are in the same folder.
  2. Include the Modernizer javascript in the head and make sure it includes SVG detection.
  3. When adding javascript in the head, type="application/javascript" will not work in older browsers so when including javascript use type="text/javascript" or don't use the type attribute at all.

Additional References

Using SVG without hacks
Mastering SVG use for a retina web, fallbacks with PNG script

Article last updated on 4/21/2018