Use of <object> and <img> as fallback

The link is behind the SVG logo, due to the object tag.

The Fallback works fine without JavaScript activated

<a href="#" >
	<object class="logo" data="logo.svg" width="186" height="235"  type="image/svg+xml">
	    <img class="logo" src="logo.png" width="186" height="235"  alt="Logo Geeks and the City" />
	</object>
</a>
		

Use of <svg> and <foreignObject> as fallback

The link shows

The Fallback works fine without JavaScript activated

This technique is very not flexible, you have to change the whole code when you want to upload a new image

<a href="#" >
   <svg  class="logo" width="186px" height="235px">
	<!-- the whole code of my SVG file -->
	<foreignObject width="0" height="0" overflow="hidden">
	 <img class="logo" src="logo.png" width="186" height="235"  alt="Logo Geeks and the City" />
	 </foreignObject>
   </svg>	 
</a>
		

Use of <img> and catching error as fallback

The link works

The Fallback relies on JavaScript and does not work when it's deactivated

<a href="#catching_error" >
	<img class="logo" src="logo.svg" alt="A sample SVG button." width="186" height="235"  alt="Logo Geeks and the City" 		onerror="this.removeAttribute('onerror'); this.src='logo.png'" />
</a>
		

Use of <img> and a CSS image background as fallback

The link works

We have to cheat, the img will display the alt tag, so we hide the image and apply the fallback to the <a> tag

If JavaScript is desactivated, browser that support SVG will display the PNG fallback

<a href="#modernizr_css_fallback" >
	<img class="logo" src="logo.svg" width="186" height="235"  alt="Logo Geeks and the City" />
</a>
		

#modernizr_css_fallback img.logo {
	display:none;
	}
#modernizr_css_fallback a{
	display:block;
	width:186px;
	height:235px;
	background-image: url(logo.png);
	background-color:transparent;
	text-indent:-999px;
	color:transparent;
	margin:0 auto;
}
.svg #modernizr_css_fallback img.logo {  
	display:block;	
}
.svg #modernizr_css_fallback a{
	background: none; 
}
		

Use of <img> with modernizR SVG detection to provide data-fallback fallback

The link works

The Fallback relies on JavaScript and does not work when it's deactivated

<a href="#img_modernizr_js_remplacement_bis" >
    <img class="logo" src="logo.svg" alt="A sample SVG button." width="186" height="235" data-fallback="logo.png"  alt="Logo Geeks and the City" />
</a>
		

if(!Modernizr.svg) {
		var imgs = $('img[data-fallback]');
		imgs.attr('src', imgs.data('fallback'));
	 }

Use of <img> with JavaScript and < noscript > as fallback

The link works

If JavaScript is desactivated, browser that support SVG will display the PNG fallback

<a href="#img_modernizr_js_remplacement_nojs">
	 <noscript><img class="logo" src="logo.png" alt="A sample SVG button." width="186" height="235" alt="Logo Geeks and the City" /></noscript>
</a>
		

if(Modernizr.svg) {
		$('#img_modernizr_js_remplacement_nojs .header a').html('<img class="logo" src="logo.svg" width="186" height="235" alt="Logo Geeks and the City"/>');		
	}
	else {
		$('#img_modernizr_js_remplacement_nojs .header a').html('<img class="logo" src="logo.png" width="186" height="235" alt="Logo Geeks and the City">');
}