SVGs in älteren IE-Versionen: PNGs als Fallback-Lösung
Kommentare

Über die beste Lösung, Bilder in Websites einzubinden, lässt sich viel diskutieren. Gerade im Hinblick auf Responsive Webdesign bieten SVGs allerdings eine ganze Reihe an Vorteilen gegenüber anderen

Über die beste Lösung, Bilder in Websites einzubinden, lässt sich viel diskutieren. Gerade im Hinblick auf Responsive Webdesign bieten SVGs allerdings eine ganze Reihe an Vorteilen gegenüber anderen Methoden, beispielsweise eine bessere Bildqualität, Bildflexibilität und geringere Dateigröße. Allerdings muss bei der Verwendung von SVGs auch bedacht werden, dass nicht alle häufig genutzten Browser SVGs unterstützen. Daher muss für den Internet Explorer 8 und frühere Versionen des IE eine Fallback-Lösung gefunden werden, die sowohl für Inline-, als auch Hintergrundbilder funktioniert. Luke Haas erklärt, wie so ein Fallback für ältere IE-Versionen aussehen kann.

Fallback-Bilder für ältere IE-Versionen erstellen

Da ältere Browser SVGs häufig nicht unterstützen, bieten sich PNG-Bilder als Fallback an. Um PNG-Versionen aller verwendeten SVGs zu erstellen, kann Grunt und das passende Grunt-Module svg2png genutzt werden, was im Gegensatz zur Umwandlung mit einem Bildbearbeitungsprogramm deutlich zeitsparender ist. Wie genau ein Grunt-Task aussehen muss, um PNG-Versionen der SVGs zu erhalten, erklärt Luke Haas ausführlicher mit Codebeispielen in seinem Tutorial.

Je nachdem, ob ein SVG als Inline- oder Hintergrundbild verwendet wird, unterscheidet sich das weitere Vorgehen. Bei der Nutzung von SVGs als Inline-Bild bietet es sich an, dem Image-Tag ein onerror-Event hinzuzufügen, wodurch die SVG mit dem PNG ersetzt wird, wenn sie nicht geladen werden kann. Zudem kann mit der Ergänzung this.onerror=null; verhindert werden, dass es zu einer unendlichen Wiederholung des Event-Calls kommt.

Werden SVGs als Hintergrundbilder genutzt, lässt sich mit einer reinen CSS-Lösung ein Fallback für SVGs in älteren Browsern produzieren, indem das PNG als Hintergrund gesetzt wird und bei Browsern, die mehrere Hintergrundbilder unterstützen mit der SVG überschrieben wird. Ältere Browser wie Internet Explorer 8 interpretieren diese Zeile im Code als Fehler, sodass sie nur das erste Hintergrundbild – also das PNG – benutzen.

PNG-Versionen von vorliegenden SVGs lassen sich also als unaufwändige und elegante Fallback-Lösung für Browser, die keine SVGs unterstützen, nutzen und bieten so auch Nutzern älterer IE-Versionen eine gute User Experience, ohne auf die Darstellung von Bildern verzichten zu müssen.

Aufmacherbild: Plan B Diagram Showing Contingency Or Fallback von Shutterstock / Urheberrecht: Stuart Miles

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -