SVG für responsive Webseiten

SVG-Grafiken sind eigentlich fast immer deutlich kleiner als Bitmaps und können sich ohne Verluste an das Platzangebot anpassen.

Trotzdem braucht ein responsives Design ein paar Kniffe, damit sich die Grafik auf die kleinen Monitore der Geräte anpasst.

SVG-Anwendungen wie Inkscape und Illustrator packen die SVG-Grafik mit vielen Attributen ein, die für die Darstellung auf der Webseite nicht erforderlich sind. Noch sind die Minifyer rar und kompliziert und komplexe SVG-Grafiken müssen mit der Hand optimiert werden, um als echte Leichtgewichte durch die Leitung in die Webseite zu passen. Aber schon beim Speichern der SVG-Grafik mit Inkscape oder InDesign kann rund 30% der Dateigröße gespart werden.

  • In SVG-Anwendungen wie Inkscape und Illustrator die Genauigkeit auf ein sinnvolles Maß begrenzen, z.B. die Nachkommastellen auf 2 oder 4 setzen. Prüfen, ob die Grafik durch das Kürzen noch ausreichend exakt ist!
  • SVG mit Inkscape als normales SVG speichern (Vorgaben von Inkscape)
  • In Inkscape unter dem Datei-Menü »Leere Defs aufräumen«
  • In den Vorgabe von Inkscape unter Datei / Inkscape Einstellungen bei SVG-Ausgabe »XML-Format Attribute kürzen« aktivieren. Dann werden die Attribute in dieselbe Zeile wie das Tag geschrieben.

Alle id-Attribute mit Grep entfernen, falls sie nicht benötigt werden (z.B. für Javascript, Animationen oder Verläufe)

id="\w+"

Überflüssige Attribute sparen:

  • font-style: normal
  • font-weight: normal
  • fill-opacity: 1
  • stroke-width: 1
  • stroke-linecap: butt
  • stroke-linejoin: miter
  • stroke-miterlimit: 4
  • stroke-opacity: 1
  • stroke-dasharray: none

Bei so viel holder Sparsamkeit ist es natürlich besser, das Original der Grafik zu sichern, damit die SVG-Grafik in Inkscape oder Adobe InDesign verlustfrei weiterbearbeitet werden kann.

SVG an einen Container anpassen

Das viewBox-Attribut passt die Größe der SVG-Grafik an die Größe ihres Containers an.

<svg … width="500" height="700">
ersetzen durch
<svg width="100%" height="100%" 
    viewBox="0 0 500 700"
    preserveAspectRatio="xMinYMin meet">

preserveAspectRatio="xMinYMin meet" kümmert sich um das korrekte Seitenverhältnis.

Alle anderen Attribute des svg-Tags werden für Inline-SVG nicht gebraucht.


xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"

0,93 0,52 400 500 600 700 λ [nm] -0,75 1 Z Y X

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

<div class="frame">
<svg viewBox="0 0 1489 724" 
    width="100%" height="100%" 
    preserveAspectRatio="xMinYMin meet">
…
</div>
.frame { 
    width:600px;
    position: relative;
    display:inline-block;
    padding-bottom: 50%;     // wird berechnet aus 
                                dem Seitenverhältnis
                                der Grafik height / width
    vertical-align: middle; 
    overflow:hidden }

.frame svg { 
    position: absolute }

@media only screen and (min-width:600px) and (max-width:919px) {
	.frame { width:450px; }
}

@media only screen and (min-width:320px) and (max-width:469px) {
	.frame { width:300px; }
}

Schöne Beschreibung der einzelnen Schritte Make SVG Responsive.

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 passt sich automatisch an die Größe des umfassenden Containers an.

<style>
img { width: 100%}
</style>
…
<img src="postbote.svg" alt="" />

Wenn die SVG-Grafik mit einem HTML img-Tag eingesetzt wird, reicht es schon, img { width: 100% } im CSS zu notieren.