SVG Fullbacks

Fallback for SVG as img tag

<img src="image.svg" alt="">  

Test if is supported

function svgasimg() {  
  return document.implementation.hasFeature("", "1.1");

The <picture> element allows for fallback images when the browser doesn't support a specified image format.You can use Picturefill to polyfill the picture element

Use inline SVG trickery
<svg width="96" height="96">  
  <image xlink:href="image.svg" src="image.png" width="96" height="96" />

Be sure to add sizing attributes to the image so that it fills up the entire SVG, and then size both svg (for modern browsers) and image (for old ones) in your CSS.

Fallback for SVG as object

<object type="image/svg+xml" data="svg-ok.svg">  
  <img src="svg-no.png" alt="No SVG support">
<object type="image/svg+xml" data="svg-ok.svg">  
  <p class="warning">
    Your browser does not support SVG!

Fallback for SVG as CSS background-image

This trick is find syntax that is nearly supported by all browsers that support svg,not the old browsers

body {  
  background: url(fallback.png);
  background: url(background.svg),
    linear-gradient(transparent, transparent);