SVG Images in HTML with simple PNG failover

I love using Scalable Vector Graphics (SVG) in my sites. The graphics can be easily generated directly from Adobe Illustrator, and scale PERFECTLY making responsive design using these images easy. However browser support for SVG images is less than 100%, here is an easy trick for making sure you don't can any of these: showing up on your pages. This uses a little bit of inline java to do automatical failover from SVG to PNG on error. PNG support is much better than SVG, but with out the benefit of nearly perfect scaling.

Only downside I see here, is you need to maintain 2 copies of your image, although most editors allow you to easily export a SVG to PNG.