SVG für responsive Webseiten

Allen voran: SVG viewBox-Attribut

Das SVG-viewBox-Attribut bestimmt den sichtbaren Ausschnitt und das Seitenverhältnis. Nur nicht übersehen, dass viewBox mit einem großen »B« geschrieben wird! Und: Ältere Versionen von Inkscape haben das viewBox-Attribut nicht gesetzt.

              +–+–– Nullpunkt der Grafik 
              | |
<svg viewBox="0 0 345 207" width="100%" height="100%">
                  |   |            |             |
                  V   V            V             V 
          absolute    absolute    relative     relative
          Höhe        Höhe        Breite       Breite
             …
</svg>

Wenn das viewBox-Attribut vorhanden ist und width und height auf 100% gesetzt werden, passen alle modernen Browser die Grafik an das Platzangebot des umfassenden Containers an. Ist ja auch eigentlich kein Problem: Der dritte und vierte Posten in der viewBox geben das Seitenverhältnis der Grafik an.

Alle modernen Browser (nicht IE11). Die alten Internet Explorer halten die Höhe der Grafik bei 150px fest und passen dann die Breite an. Erst Microsoft Edge skaliert SVG korrekt in das umfassende Element, wenn das viewBox-Attribut gesetzt ist und

• entweder width="100%" und height="100%" im SVG-Tag steht
• oder das CSS svg {width: 100%} vorlegt.

Wenn IE11 noch unterstützt werden muss, bleibt die Größe von SVG-Grafiken Fummelei.

SVG für WordPress Gutenberg

Wenn SVG mit einem img-Tag in die Seite geladen wird, gilt ebenfalls: viewBox-Attribut und width/height explizit mit Werten oder auf 100% setzen .

Damit der WordPress-Editor beim Einsetzen die Grafik nicht winzig klein setzt, kommen wir dem Gutenberg-Editor mit handfesten expliziten Werten für width und height entgegen.

<svg viewBox="0 0 345 207" width="345" height="207">
 
</svg>

SVG skalieren mit canvas

Wenn der umfassende Container die Höhe nicht explizit ausweist, setzen IE11 und älter die Höhe der SVG-Grafik mit 150px fest und passen dann die Breite an. Immerhin kann IE das Seitenverhältnis korrekt berechnen.

Der übliche Tipp für responsives SVG auch in IE11 und älteren Versionen ist der padding-bottom-Trick, mit dem die alten Versionen des Internet Explorer ausreichend Platz in der Höhe erzielen.

Eine Alternative ist ein leeres HTML canvas-Element: Mit einem leeren Canvas und CSS funktioniert die Größenanpassung exakt bei allen Seitenverhältnissen.

Bei einem canvas-Element bleibt das Seitenverhältnis konstant, wenn nur eine Dimension angepasst wird.

<div class="svginside" style="max-width:480px">
  <canvas width="430" height="260"></canvas>
  <svg height="100%" width="100%" viewBox="0 0 430 260">
		…
  </svg>
</div>

canvas {
  display: block;
  width: 100%;
  visibility: hidden;
}

.svginside {
  position:relative;
  margin-left:auto; margin-right: auto;
}

.svginside svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

Das CSS muss nur einmal in die CSS-Datei gesetzt werden, die Klasse svginside gilt für alle SVGs auf allen Seiten. Das SVG-Element muss absolut positioniert sein und auf top:0; left:0 gesetzt werden, weil das canvas-Element den Raum aufzieht. Das canvas-Element bekommt einfach dieselben Werte für width und height wie der dritte und vierte Wert des viewBox-Attributs des SVG-Tags (allerdings immer ganzzahlig!).

SVG in einem img-Tag

Das ist die einfachste aller Varianten: Die URL der Grafik sitzt im src-Attribut wie bei einem Bitmap-Bild und das Bild passt sich automatisch an die Größe des umfassenden Containers an.

Das funktioniert sogar in Internet Explorer: IE9, IE10, IE11 und Edge.

<style>
img { width: 100%}
</style>
   …
<figure class="svgimg">
   <img src="beach.svg" width="480" height="288" alt="SVG in einem image Tag">
</figure>

Wenn die SVG-Grafik mit einem HTML img-Tag eingesetzt wird, reicht es, img { width: 100%; height: auto } im CSS zu notieren. Die neueren Version von Adobe Illustrator und Inkscape setzen das viewBox-Attribut automatisch, aber ältere Versionen von Inkscape nicht. Das gilt sowohl für inline-SVG als auch für SVG in einem img-Tag.

Immer das viewBox-Attribut in das SVG-Tag der Grafik setzen und width- und height-Attribut der Grafik auf 100% setzen – das haben wir für ein responsives Webdesign sowieso bereits in der Hinterhand.

Ausschnitt mit viewBox festlegen

Das viewBox-Argument des SVG-Tags bestimmt den sichtbaren Ausschnitt einer Grafik mit nur vier Werten: x (Nullpunkt), y (Nullpunkt), width und height. x und y sind der Ursprung oder Nullpunkt des Koordinatensystems. Einen Bildausschnitt legt man durch einen neuen Nullpunkt und die Größe des Ausschnitts fest.

Auf kleinen Monitore macht es Sinn, nur einen Ausschnitt des Bildes / des Grafik zu zeigen. Das funktioniert mit Javascript und matchMedia.

var postman = document.querySelector ('#postman');
var mql = window.matchMedia("(min-width:740px)");

clipImage(mql); // Initialen Ausschnitt beim Laden der Seite festlegen

mql.addListener(clipImage); // Spezieller Event Listener für MediaQueryList

function clipImage(mql) {
    if (mql.matches) {
        postman.setAttribute('viewBox','0 0 1436 731');
    } else {
        postman.setAttribute('viewBox','180 120 600 600');
    }
}

Javascript matchMedia wird von Safari, Chrome, Opera und Firefox unterstützt, IE ab Version IE10.

Damit IE das Bild beschneidet, muss svg:not(:root) { overflow: hidden } im CSS notiert werden (das ist aber in allen normalize / boilerplate-Variationen schon vertreten).