SVG für responsive Webseiten

Allen voran: SVG viewBox-Attribut

Nur nicht übersehen, dass viewBox mit einem großen »B« geschrieben wird! 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.

              +–+–– 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.

SVG für den WordPress Gutenberg-Editor

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.

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 345 207" width="690" height="414">
 …
</svg>

<img src="spielzeugauto.svg" width="690" height="414" alt="…">

Ausschnitt mit CSS festlegen

Auf kleinen Monitore macht es u.U. Sinn, nur einen Ausschnitt des Bildes / des Grafik zu zeigen. Das funktioniert sowohl per CSS als auch mit Javascript matchMedia. Die einfachste Option ist CSS clip-path.

#beach {
	clip-path: inset(0 25% 10% 20%);
}

@media (min-width: 680px) {
	#beach {
		clip-path:revert
	}
}

Kleine Viewports zuerst und in einer Media Query den clip-path mit revert zurücksetzen.

Inline-SVG: Ausschnitt mit JavaScript matchMedia per 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.

const postman = document.querySelector ('#postman');
const 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 allen Browsern unterstützt.

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!).