SVG and PNG graceful fallback

Modernizr. Gracefull fallback: SVG adn PNG

by Leo Lanese

HTML

<script src="http://modernizr.com/downloads/modernizr-2.5.3.js"></script>
<div id="container">
    <h1>image type:</h1>
</div>

CSS

/* common code goes here */
#container {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

/* default */
.svg h1:after {
   content:" .svg :)";
}
#container {
    /* 1: load the  fallback .png first, then the .svg.
    background-image: url('http://leolanese.com/portfolio/files/mediaQueries11/images/magic.png');
    */
    background-image: url('http://leolanese.com/portfolio/files/mediaQueries11/images/magic.svg');
    background-repeat: no-repeat;
}


/* 
  2: Working on fallback using prefix no-*  
*/
.no-svg h1:after {
   content:" fallback .png :'(";
}
.no-svg #container{
    /* remove next line to test (1) */
     background-image: url('http://leolanese.com/portfolio/files/mediaQueries11/images/magic.png');
    background-repeat: no-repeat;
}

JavaScript

/*

Working on fallback, on 2 way:
1: load the  fallback .png first, then the .svg
2: Working on fallback using prefix no-* 

*/



/* 
images public domain by the Open Clip Art Library: 
http://openclipart.org 
*/