Utilisation de la balise <object> et <img> en fallback

Le lien est derrière le logo à cause de la balise object

Le fallback fonctionne avec le JavaScript désactivé

<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>
		

Utilisation de la balise <svg> avec <foreignObject> en fallback

Le lien est affiché

Le fallback fonctionne avec le JavaScript désactivé

Cette technique manque de flexibilité, il faut changer le code svg à chaque changement d'image

<a href="#" >
   <svg  class="logo" width="186" height="235">
	<!-- tout le code de mon SVG -->
	<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>
		

Utilisation de la balise <img> et un catching d'erreurs en JavaScript en fallback

Le lien fonctionne

Le fallback repose sur du JavaScript et ne fonctionne pas s'il est désactivé

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

Utilisation de la balise <img> et une image en background CSS en fallback

Le lien fonctionne

Il nous faut tricher, l'image va afficher l'attribut alt pour les navigateurs ne supportant pas SVG, il faut cacher l'image et appliquer le fallback sur la balise <a>

Si le JavaScript est désactivé, les navigateurs qui supportent ls SVG vont afficher le PNG

<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; 
}
		

Utilisation de la balise <img> avec une dectection du SVG via modernizr et data-fallback en fallback

Le lien fonctionne

Le fallback repose sur du JavaScript et ne fonctionne pas s'il est désactivé

<a href="#img_modernizr_js_remplacement_bis" >
    <img class="logo" src="logo.svg" 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'));
	 }

Utilisation de la balise <img> avec du JavaScript et la balise < noscript > en fallback

Le lien fonctionne

Si le JavaScript est désactivé, les navigateurs qui supportent ls SVG vont afficher le PNG

<a href="#img_modernizr_js_remplacement_nojs">
	 <noscript><img class="logo" src="logo.png"  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">');
}