Support SVG in Older Browsers with PNG Fallbacks

By

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

UI/UX Designer living in Philadelphia and working at Fynydd, LLC. I have a yellow lab, Bodé, and would really like to run a marathon one day (shootin' for a half first).

Fynydd is a software design and development company that creates awesome user experiences for all kinds of devices. Our expertise has helped people to do things like:

  • Create a new product or service.
  • Automate processes and workflows.
  • Bring a mobile strategy to life.
  • Better interact with their customers.

How can we help you? Contact us and let us know.