Menu icon Foundation
SVG Fallback

Im following the Zurb University article Using SVG without hacks, zurb.com/expo/library/3 and want to use Step 4: Handling Inline Images; But I cant get posted code to swap images (both images are in the img folder) Thnx P.

<!DOCTYPE html>
<html lang="en" dir="ltr" id="modernizr-sample" class="no-js">
<head>
    <meta charset="utf-8">
	<title>SVG Test Page</title>

    <script src="bower_components/jquery/jquery.js" type="text/javascript"></script>  
    <script src="bower_components/modernizr/modernizr.js" type="text/javascript"></script>
    
    <style type="text/css">
	
	</style>

   
   
</head>

<body>

	<img src="http://localhost:49339/img/Logo.svg" alt="Logo">
	 <script>
	    
	    
	     // SVG / PNG
	     if (!Modernizr.svg) {
	         $('img[src*="svg"]').attr('src', function () {
	             return $(this).attr('src').replace('.svg', '.png');
	         });
	     }

    </script>
    
</body>
</html>
            

         

svgimages

Im following the Zurb University article Using SVG without hacks, zurb.com/expo/library/3 and want to use Step 4: Handling Inline Images; But I cant get posted code to swap images (both images are in the img folder) Thnx P.

<!DOCTYPE html>
<html lang="en" dir="ltr" id="modernizr-sample" class="no-js">
<head>
    <meta charset="utf-8">
	<title>SVG Test Page</title>

    <script src="bower_components/jquery/jquery.js" type="text/javascript"></script>  
    <script src="bower_components/modernizr/modernizr.js" type="text/javascript"></script>
    
    <style type="text/css">
	
	</style>

   
   
</head>

<body>

	<img src="http://localhost:49339/img/Logo.svg" alt="Logo">
	 <script>
	    
	    
	     // SVG / PNG
	     if (!Modernizr.svg) {
	         $('img[src*="svg"]').attr('src', function () {
	             return $(this).attr('src').replace('.svg', '.png');
	         });
	     }

    </script>
    
</body>
</html>