Gedankenquerbeet
Vor 3 Jahren

Fallback für SVG Grafiken

SVG Grafiken

Eine SVG Grafik ist eine aus Vektoren statt Pixeln bestehende Grafik. Dieser Unterschied bringt enorme Vorteile für die Design Welt, da diese Grafiken Auflösungsunabhängig immer gestochen Scharf aussehen und auch ohne Qualitätsverlust endlos skaliert werden können. Aus diesem Grund finden SVG Grafiken immer öfter Einsatz in Applikationen und Webseiten, für Logos und Icons. Trotzdem gibt es immer noch viele Browser, die diesen Grafiktypen nicht unterstützen.

Fallback

Es gibt wie erwähnt immer noch Browser und ältere Endgeräte die SVG Grafiken nicht darstellen können. Aus diesem Grund sollte man, gerade wenn es um das Logo geht, für ein Fallback sorgen.

 

Für dieses ist schnell gesorgt. Als erstes müssen die SVG Grafiken in ein Pixelformat konvertiert werden. Für diese Aufgabe gibt es viele Online Dienste und Programme.

 

Ein guter Online Dienst, wäre beispielsweise dieser: svgtopng.com

Wer lieber ein Programm runterladen möchte, der findet hier was er braucht: svg2png

 

Nachdem die SVG Grafiken in das passende Format konvertiert wurden, müssen wir nur noch für das Fallback sorgen. Dieses machen wir mit einfachem Javascript.

<img src="/icon/icon.svg" onerror="this.src='/icon/png/icon.png'" />

 

Und das wars schon. Das onerror Event wird aufgerufen, sobald die SVG Grafik nicht geladen bzw. dargestellt werden kann.

Kommentar verfassen



SVG Grafiken Bei fehlender Unterstützung PNG Grafik laden Fallback