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.

<div class="svgframe">
   <svg width="100%" height="100%" viewBox="0 0 1353 442">
      <rect fill="gold" 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 – .

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