deniaz/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Easy use of SVG with PNG fallback</title>
    <link rel="stylesheet" href="main.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
</head>
<body>
    <header>
        <div id="logo">
            <img src="logo.svg" alt="Awesome Logo" data-png-fallback="logo.png" width="200" height="80" />
        </div>
    </header>
    [...]
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

## main.css
#logo
{
    width: 200px;
    height: 80px;
}

## main.js
(function($) {
    $(document).ready(function() {
        if (!Modernizr.svg) {
            var images = $('img[data-png-fallback]');
            images.each(function() {
                $(this).attr('src', $(this).data('png-fallback'));
            });
        }
    });
})(jQuery);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Easy use of SVG with PNG fallback</title>
	<link rel="stylesheet" href="main.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
	</head>
	<body>
	<header>
	<div id="logo">
	<img src="logo.svg" alt="Awesome Logo" data-png-fallback="logo.png" width="200" height="80" />
	</div>
	</header>
	[...]
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	(function($) {
	$(document).ready(function() {
	if (!Modernizr.svg) {
	var images = $('img[data-png-fallback]');
	images.each(function() {
	$(this).attr('src', $(this).data('png-fallback'));
	});
	}
	});
	})(jQuery);