SVG Fallback mit Hilfe von Modernizr und jQuery

Wie Vektor Fonts sind SVG (Scalable Vector Graphics) aus dem heutigen Frontend Development nicht mehr wegzudenken. Grund dafür, sie sind vektorbasiert und enorm klein. So können sie wunderbar für Responsive Templates verwendet werden.

Nur leider unterstützen die älteren Browser das neue Format nicht. So habe ich einen Fallback mit Hilfe von Modernizr und jQuery geschrieben.

Was ist zu tun?

Schritt 1: Das Modenizr-Snippet erstellen

Dazu rufen wir die Downloadseite von Modenizr und wählen zusätzlich unter Misc. den Wert SVG aus. Ein Klick auf den Button "Generate" generiert den Code, welcher anschließend per "Download" heruntergeladen werden kann.

Nun ladet Ihr das Skript herunter und bindet es in Eure Webseite ein.

Schritt 2: jQuery und die Funktion einbinden

Nun brauchen wir noch jQuery. Wie ihr es einbindet, erfahrt Ihr auf der Webseite von jQuery.

Jetzt kopiert Ihr den folgenden Quelltext, bindet die SVG-Grafik über das src-Attribut des IMG-Tags ein und weißt diesem noch das Data-Attribut data-svg hinzu.

Das jsFiddle dazu findet Ihr hier: http://jsfiddle.net/9unQ3/1/

<img src="PFAD-ZUR-SVG.svg" data-svg="PFAD-ZUR-FALLBACK-GRAFIK.png" />
<img src="WEITERER-PFAD-ZUR-SVG.svg" data-svg="WEITERER-PFAD-ZUR-FALLBACK-GRAFIK.png" />

<script>
	$(function(){
	/* Abfragen, ob der Browser keine SVG-Dateien unterstützt. Wenn nicht, wird die Schleife ausgeführt */
        if(!Modernizr.svg){
		/* Der Selektor selektiert nur IMG-Tags, wo das src-Attribut mit svg endet und das data-svg-Attribut gesetzt ist */
		$.each($('img[src$="svg"][data-svg]'), function(){
			var element = $(this);
			element.attr('src', element.attr('data-svg'));
		});
	}
    });
</script>