CSS, HTML und Javascript mit {stil}

SVG für responsive Webseiten

SVG responsive: Fit into Container

SVG-Grafiken sind fast immer deutlich kleiner als Bitmaps und passen sich eigentlich ohne Verluste an das Platzangebot an.

Das »eigentlich« verrät schon die Crux: Die Anpassung der Größe funktioniert nicht in Internet Explorer. Responsive SVGs braucht ein paar Kniffe, um sich widerstandslos an die Größe des Containers anzupassen.

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 gibt das Seitenverhältnis der Grafik an.

SVG Größe auf responsiven Webseiten anpassen
<figure style="max-width: 480px;margin: 1em auto">
<svg width="100%" height="100%" viewBox="0 0 345 207">
</figure>

Alle modernen Browser außer … IE9, IE10 und IE11. Hier ist die Grafik klein: 150px hoch.

SVG inline in Internet Explorer

Wenn der umfassende Container die Höhe nicht explizit ausweist, setzt IE die Höhe der SVG-Grafik mit 150px fest und passt dann die Breite an. Immerhin kann IE das Seitenverhältnis korrekt berechnen. Erst mit Microsoft EDGE endet dieses Dilemma.

Ein vielfach propagierte Lösung setzt auf – nicht ganz unkompliziertes – CSS. Der umfassende Container wird relativ, das SVG-Element absolut im umfassenden Container positioniert.

Die SVG-Grafik sitzt in einem Container mit class="svgframe".

<style>
.svgframe { width:100%; position: relative;
    display:inline-block; vertical-align: middle;
    padding-bottom: 50%;  // berechnet aus dem Seitenverhältnis height/width
    overflow:hidden }

.frame svg { position: absolute }
</style>

<div class="svgframe">
<svg viewBox="0 0 1489 724" 
    width="100%" height="100%" 
    preserveAspectRatio="xMinYMin meet">
…
</div>

Detaillierte Beschreibung der einzelnen Schritte Make SVG Responsive.

Das Gelbe vom Ei ist diese Technik nicht, denn für jede Grafik muss das Seitenverhältnis Höhe:Breite individuell berechnet und als padding in CSS angegeben werden.

SVG mit Javascript anpassen

Einige Zeilen Javascript reichen, um padding-bottom für alle Grafiken der Seite anzupassen.

preserveAspectRatio ist nicht nötig. Das Wesentliche ist und bleibt das viewBox-Attribut.

<style>
.svgframe {  position: relative }
.svgframe svg { position: absolute }
</style>

<div class="svgframe">
   <svg viewBox="0 0 400 100" width="100%" height="100%">
      <rect fill="orchid" x="0" y="0" width="400" height="100" />
   </svg>
</div>

<script>
var svg = document.querySelectorAll('.svgframe svg');
var len = svg.length; 
for (var i=0; i<len; i++) {
   if (svg[i].getAttribute('width') == '100%' && parseInt(svg[i].parentNode.clientWidth) > 0) {
      var viewBox = svg[i].getAttribute('viewBox');
      viewBox = viewBox.replace(/\s\s+/g, ' ');
      var w = viewBox.split(' ')[2];
      var h = viewBox.split(' ')[3];
      var x = h / w * 100;
      svg[i].parentNode.setAttribute('style', 'padding-bottom:' + x +'%');
   }
}
</script>

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="accordion.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% } 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. Bei einem img-Tag muss nur im CSS img { width: 100%; height: auto } notiert sein – .

SVG in einem image Tag
In einem img-Tag funktioniert die Anpassung in allen Browsern – vorausgesetzt, das viewBox-Attribut ist in der SVG-Datei gesetzt.
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.

SVG Ausschnitt über viewBox festlegen
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).