Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 19 Kommentare

  1. Lea
    schrieb am 28.07.2015 um 12:26 Uhr:

    Ach ja, eben habe ich gerade noch einen Deiner neueren Artikel gelesen, wo Du diesen Code empfiehlst:
    // Prüfe ob SVGs dargestellt werden können
    if(!document.createElement(’svg‘).getAttributeNS){
    $(‚html‘).addClass(’no-svg‘);

    // Schreibe im HTML-Markup die Dateiendung *.svg auf *.png um.
    $(‚img[src$=“svg“]‘).attr(’src‘, function() {
    return $(this).attr(’src‘).replace(‚.svg‘, ‚.png‘);
    });
    } else {
    $(‚html‘).addClass(’svg‘);
    }
    Wäre das eventuell noch besser?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 30.07.2015 um 09:00 Uhr:

      Dieses Snippet basiert auf jQuery aber nicht mehr auf Modernizr.

      Antworten
      • Lea
        schrieb am 30.07.2015 um 09:59 Uhr:

        Hallo Jonas,
        vielen lieben Dank für Deine Hilfe. Um es jetzt zusammenzufassen: Welches der drei Snippets würdest Du als das beste empfehlen? Ist es besser, ohne Modernizr oder ohe uery/js auszukommen?

      • Jonas Hellwig (Autor)
        schrieb am 30.07.2015 um 10:13 Uhr:

        Das lässt sich nicht pauschal beantworten. Es hängt vom jeweiligen Projekt ab und von den Technologien die dort zum Einsatz kommen. Wenn du es nicht entscheiden kannst bzw. willst wende dich bitte an deinen Theme-Entwickler.

  2. Lea
    schrieb am 28.07.2015 um 12:03 Uhr:

    Hallo Jonas!
    Ich habe den Beitrag versucht zu verstehen, da ich gerne svg Bilder auf meiner Seite einsetzen möchte. Ich habe eine Frage: Ich hatte vorher noch nie von Modernizr gehört, habe jetzt aber von meinem Themehersteller erfahren, dass ein WP-Theme Modernizr verwendet. Heißt das, dass ich einfach z.B. in den Themeoptionen svg-Bilder für Logo, Footer etc hochladen kann(und gleichzeitig png-Versionen mit denselben Namen in die Mediathek hochlade) und dann in meiner Child Theme function.php Dein Snippet
    if(!Modernizr.svg) {

    $(‚img[src$=“svg“]‘).attr(’src‘, function() {
    return $(this).attr(’src‘).replace(‚.svg‘, ‚.png‘);
    });

    }
    einfüge und somit ein Fallback erstellt wäre? Oder ist es doch komplizierter? Und eine letzte Frage: Was ist der Unterschied zwischen Deinem Snippet und folgendem:

    if (!Modernizr.svg) {
    var imgs = document.getElementsByTagName(‚img‘);
    var svgExtension = /.*\.svg$/
    var l = imgs.length;
    for(var i = 0; i < l; i++) {
    if(imgs[i].src.match(svgExtension)) {
    imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
    console.log(imgs[i].src);
    }
    }
    }

    Vielen Dank schon mal im Voraus!

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 30.07.2015 um 08:58 Uhr:

      Hallo Lea,
      das von dir erwähnte Snippet ist JavaScript auf Basis von jQuery und kein PHP. Du kannst es also nicht in der functions.php einfügen, sondern es gehört in die Scripte deiner Seite – beispielsweise in den Footer oder in ausgelagerte Dateien. Wo es sich am besten anbietet musst du mit deinem Theme-Entwickler besprechen. Darüber hinaus ist die Funktionalität abhängig von Modernizr. Das zweite von dir gepostete Snippet erledigt die selbe Aufgabe wie das in diesem Beitrag gezeigte Snippet, allerdings scheint deine Variante etwas fehlertoleranter zu sein was die Benennung von Dateien angeht. Abgesehen davon basiert es nicht auf jQuery.

      Antworten
  3. Voker neuenhaus
    schrieb am 12.09.2014 um 20:14 Uhr:

    Die Info über die dynamischen fallbacks waren sehr interessant. Ich hab den Artikel gerne als Info in meinen eigenen Artikel über SVGs eingefügt. Was mich noch interessiert hätte: wie gut sind die Server von SVG MAGIC verfügbar? Kann man das international in Kundenprojekten einsetzen? Gibt es vielleicht eine Variante, die man auf eigenen Servern einsetzen kann. Sonst würden wir lieber auf fest generierte Fallback Bilder setzen.

    Antworten
  4. SVG Grafiken: kleine Bildgrößen für alle Devices und viel mehr… | blog.pagemachine
    schrieb am 12.09.2014 um 12:13 Uhr:

    […] http://caniuse.com/#feat=svg •    Artikel auf blog.kulturbanause über SVG mit PNG Fallback: https://blog.kulturbanause.de/2013/09/svg-mit-png-fallback/ •    drweb.de über Adobe snap.svg für SVG Animationen: […]

    Antworten
  5. joocom
    schrieb am 07.04.2014 um 10:01 Uhr:

    Eine gute Fallback Lösung bietet auch das jQuery Plugin SVGMagic.
    http://www.joocom.de/blog/svgmagic-svg-fallback-jquery-plugin/

    Antworten
  6. hans
    schrieb am 19.12.2013 um 18:08 Uhr:

    was spricht gegen ein simples einbetten per „object“ + fallback?

    Antworten
  7. Alexander Rutz
    schrieb am 25.11.2013 um 16:04 Uhr:

    Leider kann Modernizr nicht wirklich testen ob SVG als Background tatsächlich unterstützt wird (siehe hier: https://github.com/Modernizr/Modernizr/issues/687).

    In der 3er Version soll das wohl möglich werden.

    Antworten
  8. ashyda
    schrieb am 18.11.2013 um 12:34 Uhr:

    Vielen Dank, sehr hilfreicher Artikel wenn man sich das erste Mal mit svg-Fallbacks beschäftigt :)

    Antworten
  9. Joschi Kuphal
    schrieb am 17.10.2013 um 23:56 Uhr:

    Hallo Jonas,

    zum einen muss ich – mal wieder – mit Erstaunen zu Kenntnis nehmen, wie selbstverständlich (im Abschnitt „Automatisierter Fallback“) jQuery-Funktionen eingesetzt werden, ohne dass der Artikel auch den leisesten Hinweis auf den Einsatz von jQuery enthält (ja, ich weiß, jQuery ist das neue Javascript … ;)). #justsaying

    Ferner möchte ich auf Tools hinweisen, die den Einsatz von SVG mit PNG-Fallback insbesondere dann vereinfachen, wenn man mehrere bis viele solche SVG-Grafiken einsetzen möchte, z.B. als Icons oder als (nebenbei: insgesamt geräterübergreifend kompatibleren) Ersatz für Icon-Fonts verwenden möchte:

    – Da ist zum einen Scott Jehl’s grunticon (https://github.com/filamentgroup/grunticon), das auf Node.js aufsetzt und ein Verzeichnis mit SVG-Icons in einen CSS-Icon-Kit konvertiert. Es gibt eine Online-Version davon: http://www.grumpicon.com/

    – Ferner gibt es iconizr (https://github.com/jkphl/iconizr) von meiner Wenigkeit, welches ein PHP-Kommandozeilenskript ist und sehr ähnlich wie grunticon arbeitet. Der Hauptunterschied ist, dass iconizr zusätzlich SVG- und PNG-Sprites erzeugt und neben CSS- auch Sass-Code produzieren kann. Auch hierzu gibt es eine Online-Version: http://iconizr.com

    Setzt man auf seiner Website viele SVG-Grafiken ein, und integiert sich eines dieser Tools gut in den eigenen Workflow, dann kann man sich damit nicht nur eine Menge Handarbeit sparen, sondern eine hochkompatible Lösung erreichen, die keine Abhängikeiten mit sich bringt (d.h. selbst auf den Modernizr kann verzichtet werden).

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 18.10.2013 um 08:39 Uhr:

      Hallo Joschi, vielen Dank für deine sehr hilfreiche Ergänzung und die vielen Link-Tipps. Ich habe im Text den Hinweis auf jQuery nachgetragen. Du hast recht, das war nicht ganz sauber :)

      Antworten
  10. Sven Wolfermann
    schrieb am 26.09.2013 um 07:36 Uhr:

    Hallo Jonas!

    Wage Aussage jetzt, ich müsste nochmal den Test raussuchen, aber ich glaube Inline-SVG werden in Modernizr mit Modernizr.inlinesvg getestet. Irgendwo hatte ich das Problem mal, das SVG als background unterstützt wird, aber nicht in .

    Antworten
  11. Karoline
    schrieb am 25.09.2013 um 14:54 Uhr:

    Interessante Lösung. Ich hatte das vor kurzem noch mit conditional comments gebaut, was aber relativ umständlich war.

    Antworten
  12. Sebastian
    schrieb am 25.09.2013 um 11:16 Uhr:

    Wirklich interessant. Vielen Dank für diesen Artikel

    Antworten
  13. Carsten Witt
    schrieb am 25.09.2013 um 11:16 Uhr:

    Man kann ja auch à la Google der Auffassung sein, dass man IE8 nicht mehr unterstützen muss. So ganz ist das Thema aber nicht vom Tisch: Laut der Statistik „Anteil der verschiedenen Android-Versionen an allen Geräten mit Android OS im August/September 2013“ [1] haben noch ca. 31% der Android Geräte die Version 2.3.*, deren Android-Browser SVG nur bruchstückhaft unterstützt. In Zeiten responsiven Webdesigns sollte das Problemkind also eher Gingerbread heißen statt IE8.

    [1] http://de.statista.com/statistik/daten/studie/180113/umfrage/anteil-der-verschiedenen-android-versionen-auf-geraeten-mit-android-os/

    Antworten
  14. Marco Rieser
    schrieb am 25.09.2013 um 10:43 Uhr:

    Habe das bis jetzt immer über eine .ie8 Klasse gelöst aber deine Variante ist sauberer. Danke :)

    Antworten

Schreibe einen Kommentar zu Alexander Rutz Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →