Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 12. September 2014

SVG-Fallback für ältere Browser: Tipps zur alternativen Auszeichnung ohne JavaScript

Das SVG-Format wird mittlerweile von allen gängigen Browsern unterstützt. Es ist vor allem der Internet Explorer, der in älteren, leider aber immer noch verwendeten Versionen Probleme macht. Da er das SVG-Format nicht kennt, müssen Alternativen wie PNG oder JPEG als Fallback her. Zwar gibt es per JavaScript Möglichkeiten, für bestimmte Browser alternative Dateien einzubinden – für JavaScript-Verweigerer ist das jedoch keine Option. Außerdem gibt es zum JavaScript-basierten SVG-Fallback ja Alternativen mit teils deutlich weniger Aufwand.

Anzeige

svg_fallback

HTML und SVG-Dateien

Bei aktuellen Browsern werden SVG-Dateien nicht anders behandelt als andere Grafikformate wie PNG oder JPEG. Das heißt, sie können schlicht per „<img>“-Element eingebunden werden. Alternativ besteht natürlich die Möglichkeit, das „<svg>“-Element zu nutzen. Da Browser, wie der Internet Explorer 8, aber weder das SVG-Format, noch das entsprechende Element kennen, werden sie es einfach ignorieren.

Externe Bilddateien werden bei SVG per Xlink und dem „<image>“-Element eingebunden. Kurioserweise interpretiert der Internet Explorer in allen Versionen, die das SVG-Format nicht kennen, das „<image>“-Element wie das ähnlich klingende „<img>“-Element. Wird per „src“-Attribut beispielsweise eine JPEG-Datei eingebunden, wird der genannte Internet Explorer diese Datei darstellen. Alle Browser, die SVG und somit das „<image>“-Element unterstützen, werden hingegen die SVG-Datei darstellen.

<svg width="100" height="100">
  <image xlink:href="logo.svg" src="logo.jpg" width="100" height="100" />
</svg>

Im Beispiel wird per „<image>“-Element und dem korrekten Attribut „xlink:href“ eine externe SVG-Datei eingebunden. Das nicht korrekte „src“-Attribut wird nur vom Internet Explorer 8 und abwärts interpretiert. Es verweist auf eine JPEG-Datei als Alternative.

Wer für Inline-SVG ein Fallback einsetzen möchten, kann ganz ähnlich verfahren. Hierbei wird beim „<image>“-Element das „xlink:href“-Attribut einfach weggelassen.

<svg width="100" height="100">
  <path d="M5 1v14l9-7" fill="red" />
  <image src="logo.jpg" width="100" height="100" />
</svg>

Im Beispiel zeichnen wir per SVG einen roten Pfeil. Ältere Versionen des Internet Explorers werden hingegen nur das per „<image>“ eingebundene JPEG darstellen.

Eine andere Möglichkeit, ein Fallback einzurichten, ist die Verwendung des „<object>“-Elements, welches ebenfalls eine SVG-Datei in ein Dokument einbinden kann. Innerhalb dieses Elementes wird eine Fallbackdatei per „<img>“ ausgezeichnet. Wichtig ist, dass im „<object>“-Element nicht der korrekte MIME-Typ „image/svg-xml“, sondern beispielsweise „text/svg+xml“ steht. Nur so erreicht man, dass ältere Versionen des Internet Explorers das alternative „<img>“-Element verwenden. Aktuelle Browser werden die SVG-Datei trotzt falschem MIME-Typ darstellen.

<object data="test.svg" type="text/svg+xml">
  <img src="test.jpg">
</object>

CSS und SVG-Dateien

Fallbacks für CSS bedienen sich vom Grundsatz her demselben Prinzip wie oben beschrieben. Es werden in diesem Fall CSS3-Eigenschaften verwendet, die ältere Versionen des Internet Explorers nicht unterstützen. Will man beispielsweise eine SVG-Datei als Hintergrundgrafik einsetzen, bedient man sich der CSS3-Möglichkeit, multiple Hintergründe einzusetzen.

Bei multiplen Hintergründen wird zwar auch die gängige „background-image“-Eigenschaft verwendet, die auch ältere Versionen des Internet Explorers unterstützen. Allerdings werden der Eigenschaft mehrere Dateien – per Komma voneinander getrennt – hinterlegt. Für den Internet Explorer 8 und abwärts ist das Grund genug, die gesamte Eigenschaft zu ignorieren.

background-image: url("hintergrund.svg"), none;

Im Beispiel wird ein Hintergrund mit mehreren Grafiken definiert. Dabei wird die Angabe für die zweite Hintergrundgrafik auf „none“ gesetzt. Somit erreicht man, dass ältere Browser die Eigenschaft ignorieren, obwohl tatsächlich nur eine Grafik angegeben ist.

Definiert man nun eine klassische „background-image“-Eigenschaft mit nur einer Hintergrundgrafik und platziert diese vor dem multiplen Hintergrund, werden ältere Browser diese interpretieren.

background-image: url("hintergrund.jpg");
background-image: url("hintergrund.svg"), none;

Im Beispiel sind zwei  „background-image“-Eigenschaften definiert. Die erste Eigenschaft wird von allen Browsern interpretiert. Die zweite Eigenschaft wird nur von aktuellen Browsern, die CSS3 unterstützen, interpretiert. In diesem Fall wird die erste Eigenschaft damit überschrieben.

Die hier vorgestellte Fallbacklösung für CSS funktioniert leider nicht für alle Eigenschaften, welche per „url()“ Grafiken einbinden. So besteht anders als bei „background-image“ für die Eigenschaft „list-style-image“ keine Möglichkeit, ein Fallback einzurichten. Hier gibt es keine CSS3-Variante, die von älteren Browsern nicht unterstützt wird.

Fazit

In vielen Fällen sind einfache Fallbacks ohne JavaScript möglich. Leider kann man sich nicht immer an alle Standards halten, wenn beispielsweise ein falscher MIME-Typ angegeben ist. Dafür sind die Lösungen schnell eingesetzt und kommen ohne JavaScript-LÖsungen wie beispielsweise „Modernizr“ aus.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

2 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.