Fallback-Lösungen für SVGs im Überblick
Kommentare

Dass SVGs für den Einsatz im Web zahlreiche Vorteile bieten, dürfte mittlerweile bekannt sein. Allerdings sind SVGs nach wie vor nicht besonders weit verbreitet – nicht zuletzt, weil es immer noch viele User gibt, denen SVGs nicht angezeigt werden können.

Schuld daran sind vor allem der mangelnde Support in Legacy-Browsern und die fehlenden Upgrades zu modernen Browsern. Um auch solchen Usern eine funktionelle User Experience bieten zu können, benötigt man also Fallback-Lösungen – und davon gibt es einige. Amelia Bellamy-Royds und Chris Coyier haben nun einen umfassenden Guide zu den unterschiedlichen Möglichkeiten verfasst.

Unterschiede bei verschiedenen Fallback-Lösungen

Bevor es an die verschiedenen technischen Möglichkeiten zur Implementierung von Fallback-Lösungen in Browsern, die keine SVGs unterstützen, geht, muss man sich zunächst überlegen, welche Art Fallback man eigentlich braucht. Dabei gibt es nämlich einige Unterschiede, insbesondere, wenn es um Fallbacks für interaktive SVGs geht.

Typischerweise dürfte das Fallback-Szenario in eine der folgenden vier Kategorien passen: kein Fallback, Text-Fallback, Bild-Fallback oder interaktives Fallback. Am einfachsten ist natürlich, keine Fallback-Lösung zur Verfügung stellen zu müssen, etwa, wenn es sich bei dem SVG um ein Icon handelt, dessen Fehlen die Funktionalität der Seite nicht negativ beeinflusst und das durch ein Text-Label ausgedrückt wird. Genauso lässt sich mit einem Text-Fallback ein entsprechendes Text-Label platzieren.

Guide zeigt Fallback-Lösungen für Bild- und interaktive Fallbacks

Ein wenig anspruchsvoller sind die Lösungen für Bild- und interaktive Fallbacks. Bei beiden wird das ursprüngliche SVG-Bild mit den PNG- oder GIF-Äquivalent beziehungsweise einer Grafik-Sprache mit interaktivem DOM ersetzt. Genau das sind auch die Lösungen, die in dem Guide von Amelia Bellamy-Royds und Chris Coyier intensiv besprochen werden.

Dort finden sich verschiedene Lösungen für Fallback-Möglichkeiten bei SVGs, die:

  • mit dem -Tag eingebunden werden, zum Beispiel Source Swapping oder die Nutzung von beziehungsweise Picturefill
  • als eingebunden werden
  • als CSS background-image eingebunden sind
  • mit inline eingebunden sind

Zusätzlich gibt es noch viele weitere Tipps und Informationen zur Nutzung von SVGs in Icon-Systemen und welche besonderen Probleme beim Erstellen von entsprechenden Fallback-Lösungen auftreten können. Ein Blick in den Guide lohnt sich daher in jedem Fall, zeigt er doch vor allem eins:

You can totally do fallbacks for SVGs.

Aufmacherbild: Chalkboard – Plan A Plan B von Shutterstock / Urheberrecht: Bildagentur Zoonar GmbH

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -