SVG image-Tag – Grafik als PNG für alte Browser

SVG in einem image-Tag

Schöner Trick von Alexey Ten, der Bilder gleichzeitig als PNG für ältere Browser und als SVG für alle anderen in HTML einbindet: Eine SVG-Grafik wird innerhalb eines SVG-Elements mit dem SVG image-Tag geladen.

Browser ohne SVG-Support halten das image-Tag für ein img-Tag und holen sich ein Bitmap-Bild.

Eigentlich ist das SVG-image-Tag dazu bestimmt, Bitmap-Bilder in eine SVG-Grafik zu laden. Aber das xlink:href-Attribut lädt nicht nur Bitmap-Bilder, sondern auch SVG.

<svg width="96" height="96">
    <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>

Browser ohne SVG-Support überlesen das SVG-Tag, halten image für einen Schreibfehler und greifen gnädig zum img-Tag.

Mit einem xlink:href-Attribut rendern SVG-fähige Browser die SVG-Grafik und überlesen das src-Attribut. Browser ohne SVG-Unterstützung zeigen das Bildmap-Bild im src-Attribut.

screenshot-svg-in-image-tag1
Links: IE8, rechts: Safari

Noch ein weiterer Schritt, damit sich das Bitmap-Bild und die SVG-Grafik an den Platz anpassen und responsive werden:

SVG responsive

<div class="svg-frame">
   <svg width="100%" height="100%" viewbox="0 0 600 493" preserveAspectRatio="xMinYMin meet">
      <image xlink:href="camera.svg" src="camera.png" alt="" width="600" height="493" />
   </svg>
</div>

Im svg-Tag ersetzt das viewBox-Attribut die Angabe von Breite und Höhe durch width und height. Dann passt sich die SVG-Grafik responsive an die Maße des umfassenden Containers an.

.svg-frame {
   width:300px;
   position: relative;
   display:inline-block;
   padding-bottom: 50%;     // wird 100%, wenn die Grafik
                            // höher als breit ist
   vertical-align: middle; 
   overflow:hidden }
.svg-frame svg { position: absolute; }
image { width:100%; height: auto; }

Die blaue Rakete ist das Bitmap-Bild, die grüne ist eine SVG-Grafik.

SVG in Facebook, Pinterest, Google+ und Twitter

Jetzt ist IE8 zwar so gut wie außer Betrieb, aber auch nach IE8 bleibt ein wichtiger Bereich des Webs von SVG unberührt: Facebook und Pinterest, Google+ und Twitter leugnen die Existenz von SVG auch weiterhin. Ein Zweibild als Bitmap ist auch in den nächsten Jahren das Beiwerk, um den sozialen Medien die Grafiken näher zu bringen. Der »SVG-in-einem-image-Tag-Trick« bringt das nicht zustande.

Ein Ausweg für Google+ und Facebook ist ein Open-Graph-Metatag.

<meta property="og:image" content="https://www.mediaevent.de/wp-content/uploads/2014/03/svg-in-einem-image-tag.png" />

HTML picture öffnet dem SVG ebenfalls den Weg zu Google+ und Facebook (und nebenbei auch zu alten Browsern ohne SVG). Browser, die SVG nicht unterstützen, überspringen das source-Element.

<picture>
    <source srcset="fruity-icons.svg" type="image/svg+xml">
    <img src="fruity-icons.png" alt="fruity-icons" />
</picture>
fruity-icons

SVG in WordPress laden

Am Ende wird der Media Upload in WordPress noch SVG-ready, wenn die Datei functions.php um SVG erweitert wird. Dann kann die WordPress Mediathek auch mit SVG beladen werden.

function cc_mime_types( $mimes ){
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

Allerdings kann der WordPress-Media Upload die Größe der SVG-Grafik nicht bestimmen und setzt width=“1″ height=“1″. Auf die HTML-Ansicht umschalten und die gewünschte Größe einstellen.

Damit der WordPress-Editor HTML5-Tags wie svg, figure, … ) nicht auslöscht, muss der wpautop-Filter in der Datei functions.php des Themes deaktiviert werden.

remove_filter('the_excerpt', 'wpautop');
remove_filter('the_content', 'wpautop');

Vor gut 15 Jahren hat die Entwicklung von SVG als Standard begonnen. Jetzt dürfen wir uns endlich die Einzelteile aus einem Puzzle zusammentackern.

Wenn SVG-Grafiken dann auf der Seite immer noch nicht angezeigt werden, ist die Konfiguration des Servers angestaubt oder wurde von einem Spartaner angelegt: Der Mime-Type SVG fehlt. In der htaccess-Datei nachholen:

AddType image/svg+xml svg
AddType image/svg+xml svgz 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

4 Gedanken zu „SVG image-Tag – Grafik als PNG für alte Browser“

  1. Haessler – 11. August 2015

    Hendrik: Da hast du recht, das Rezept von Emma funktioniert nicht immer. Es gibt kein einfaches Rezept für responsives Inline-SVG, es sein denn, man nimmt ein Javascript, dass das Seitenverhältnis für jedes SVG auf einer Seite für die jeweilige Anzeigegröße berechnet.

  2. Hendrik – 10. August 2015

    div style=“width:100%;height:33%“
    würde aber die Höhe vom Container nehmen, das macht doch keinen Sinn

  3. Emma – 7. Oktober 2014

    Statt dieser Frickelei mit preserveAspectRatio und dem Padding setzt man einfach ein div oder ein figure mit dem Seitenverhält rund um die SVG-Grafik:

    div style=“width:100%;height:33%“

    z.B. wenn das Seitenverhältnis der Grafik 3:1 ist. Mehr ist gar nicht nötig. Der Raum um die Grafik wird auf kleinen Monitoren etwas größer, aber das ist bei der Spielerei mit padding und preserveAspectRatio auch nicht anders.
    Und das ist schon alles, was man machen muss, um eine SVG-Grafik responsive für alle Monitore einzusetzen.

    • Haessler – 7. Oktober 2014

      #Emma! Das scheint einfach klasse zu funktionieren. Das Einfachste, dass ich bislang für SVG responsive zu Gesicht bekommen habe. Haben Sie eine Idee, warum der Abstand bei kleinen Monitoren wächst?