Add PNG Fallback Images For SVG

Scalable Vector Graphics or SVG have been around for quite a while, but they are having a sort of renaissance with responsive design, specifically for mobile devices. SVG has some major benifits over other file types. If you want to add SVGs to your website to replace PNGs or GIFs, there are some things you need to keep in mind.

• First, being vector based, SVG scales from tiny to huge without any loss of quality.
• Second, SVG’s can be compressed very well so the smaller file size = faster site load speed.
• Third, looks great on any screen, from phones to 4k TV.

(There are also some neat animations, and filters that you can use on SVG’s to really do some cool stuff, but for the purpose of this post I want to focus on file compatibility.)

The biggest downside to using SVG in my opinion is that there are a few legacy browsers who do not support SVG. (Mostly IE 6 & 7 and Android 2.3)
There are many different steps you can take to ensure compatibility with fallback images. David Bushell’s A Primer to Front-end SVG Hacking might be the most complete resource on how to do that, which is where I picked up the following fallback.

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

SVG can be implemented in many different ways, the easiest of which is probably inside of an img tag.
You can see the src="image.svg" calling the SVG to display.
The onerror="this.onerror=null; this.src='image.png'"is the fallback.
The onerror tells the browser that if it can not load image.svg then it should load image.png.