Einbindung von SVGs mit Fallback in HTML

Ich habe gerade auf ein paar Seiten hier im WordPress SVG-Graphiken integriert. Das ist leider gar nicht sooo einfach und hat noch ein paar Hürden.


<object data="http://www.last-crusade.de/wp-content/uploads/2011/last-crusade/jabber_xmpp/xmpp_logo.svg" type="image/svg+xml" width="100" height="103"><img width="100" height="103" src="http://www.last-crusade.de/wp-content/uploads/2011/last-crusade/jabber_xmpp/xmpp_logo.svg.png" alt="XMPP-Logo"></object>

Sieht folgendermaßen aus:
XMPP-Logo

In Browsern, die SVG noch nicht unterstützen (*hust*verflixter IE*hust*), wird statt dessen das PNG angezeigt. Funktioniert soweit ganz gut, getestet mit Opera 11, Firefox 3.6 (und IE8 mit Fallback). Googles Chrome verschluckt sich ein wenig an der Größenangabe vom SVG (also width und height), wenn ich es richtig sehe, will er auf die Größe, welche im SVG selbst definiert ist, zurückgreifen und stellt dann nur den definierten Ausschnitt dar. Auch wenn das Ganze vermutlich bei Weitem nicht die schönste Umsetzung ist, halte ich dieses Verhalten schlicht und ergreifend für falsch. Nun, soweit mal der Stand seitens HTML.
Dass man in WordPress aber generell keine SVGs in die Mediathek laden kann, hat mich schon ein wenig enttäuscht – da ist noch Nachholbedarf, Jungs & Mädels! 🙂

Das XMPP-Logo steht unter dem Copyright der XSF, vgl. [1], [2].

Schreib einen Kommentar

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

*