SVG mit PNG-Fallback

svg-fallback-png

Das Dateiformat SVG (Scalable Vector Graphic) ist die Zukunft der Grafikformate im Web. Sofern sich SVG gestalterisch anbietet, überzeugt das Vektor-Format mit brillanter Bildqualität auf allen Displaytechnologien (z. B. Retina/HiDPI), stufenloser Skalierbarkeit und verhältnismäßig geringer Dateigröße.
Leider wird SVG in älteren Browsern (< IE8) nicht unterstützt. Bis diese Browser an Relevanz verloren haben, muss also eine Übergangslösung her. Mit Hilfe von Modernizr lässt sich ohne Schwierigkeiten ein sehr wartungsfreundlicher PNG-Fallback herstellen.

Workshop: CSS – The Next Level

Wir machen dich fit für die Zukunft des Web! In diesem Workshop lernst du die spannendsten neuen CSS-Techniken anhand praktischer Übungen kennen.

Berlin, 11. November 2016

Feature-Detection mit Modernizr

Das Script Modernizr gehört bereits seit längerer Zeit zum Standardrepartoir eines Webdesigners. Für den Fall, dass euch Modernizr nicht bekannt sein sollte möchte ich aber einen kurzen Überblick geben.
Modernizr ist ein JavaScript mit dessen Hilfe ihr herausfinden könnt, welche HTML- und CSS-Funktionen der Browser unterstützt. Wenn das Script in der Website eingebunden ist, schreibt es verschiedene CSS-Klassen in den html-Tag der Seite. Das sieht dann (in Chrome 29) so aus:


<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths -webkit-">

Anhand dieser Klassen könnt ihr nun erkennen, welche Funktionen vorhanden sind und genutzt werden können. Achtet aber darauf Modernizr spätestens beim Projektabschluss noch einmal sauber zu konfigurieren. Beim Download kann festgelegt werden, welche Funktionen überhaupt überprüft werden sollen. Mit Blick auf die Performance der Website sollte man nur die Features überprüfen lassen, die auch eingesetzt werden.

SVG als CSS-Hintergrund

Kommen wir nun zum SVG-Fallback. Wir fangen mit der einfacheren Variante an: Eine SVG-Grafik die mittels CSS als background zugewiesen wurde.
Wenn Modernizr aktiv ist und der Browser SVG unterstützt, ist die CSS-Klasse .svg vorhanden. Wir schreiben im Code also zuerst die Fallback-Lösung mit einer PNG-Grafik als Hintergrund.


div {
  height:300px;
  width:300px;
  background:url(img/background.png) 0 0 no-repeat;
}

Anschließend gehen wir nach dem Prinzip Progressive Enhancement vor und machen die SVG-Grafik von der entsprechenden CSS-Klasse abhängig.


.svg div {
  background:url(img/background.svg) 0 0 no-repeat;
}

Das war schon alles. Wenn der Browser SVG unterstützt wird die SVG-Grafik als Hintergrund geladen, anderenfalls fehlt die Klasse .svg und der Browser nutzt die PNG-Grafik als Fallback.

SVG als <img>-Tag im HTML-Markup

Bei SVG-Grafiken im HTML-Markup wird es etwas kniffliger, denn mit Hilfe der CSS-Klasse können wir hier keine Grafiken austauschen. Die Ausgangssituation sieht so aus:


<img src="img/image.svg" alt="SVG Grafik">

Mit ein wenig JavaScript (jQuery) kann bei aktivem Modernizr geprüft werden ob SVG vom Browser unterstützt wird.


if(Modernizr.svg) { 
  /* Tu etwas, wenn der Browser SVG versteht */
}

Wenn ihr eine Lösung anbieten möchtet, sofern der Browser keine SVGs unterstützt, dreht ihr das Ganze einfach um:


if(!Modernizr.svg) { 
  /* Tu etwas, wenn der Browser kein SVG versteht */
}

Automatisierter Fallback

Um die Arbeit bei der Bereitstellung von Fallback-Grafiken möglichst gering zu halten, bietet es sich an das Snippet wie folgt zu erweitern.


if(!Modernizr.svg) {
	
  $('img[src$="svg"]').attr('src', function() {  
    return $(this).attr('src').replace('.svg', '.png');
  });

}

Nun wird die Dateiendung aller Bilder automatisch von *.svg auf *.png umgeschrieben, sofern der Browser kein SVG unterstützt. Super praktisch.

Bei der Erstellung von SVGs in Illustrator müsst ihr nun nur noch zusätzlich eine PNG-Grafik mit gleichem Dateinamen exportieren.

Live-Demo beider Lösungen

Ich habe eine Live-Demo erstellt, die sowohl die CSS- als auch die HTML-Lösung beinhaltet. In einem modernen Browser wie Chrome sieht das Beispiel so aus:

SVG-Grafiken in Chrome
SVG-Grafiken in Chrome

Im Internet Explorer 8 unter Windows 7 hingegen, werden die PNG-Grafiken geladen.

SVG-Fallback im Internet Explorer 8 (IE8)
SVG-Fallback im Internet Explorer 8 (IE8)

Ihr könnt die Demo hier anzeigen lassen, bzw. die Dateien herunterladen.

Beispieldateien herunterladen

»SVG Magic« erstellt PNG-Fallbacks automatisch

Das jQuery-Plugin SVG-Magic prüft ebenfalls ob der Browser SVG versteht. Wenn nicht, sendet das Script die SVG-Grafik an einen Server, konvertiert die Datei in PNG und lädt die PNG-Grafik. Sofern man jQuery ohnehin bereits einsetzt und auch keine Bedenken bei möglichen Performance- oder Sicherheitsproblemen hat, sollte man das Script einmal ausprobieren.