SVG für responsive Webseiten

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

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

SVG hat meist eine geringere Dateigröße als ein PNG-Bild und liefert dabei immer eine saubere Qualität auf allen Geräten. Wir dürfen aber nicht vergessen, dass die Browser bei SVG die ganze Arbeit leisten müssen: SVG wird nicht von der Hardware unterstützt wie Javascript Canvas. Es lohnt sich, SVG-Grafiken zu optimierten.

Möglichst wenig Fließkommaberechnungen und Transformationen einrechnen, damit dem Client komplexe Berechnungen erspart bleiben.

SVG-Programme 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.

Keep it simple

Am Ende darf nicht vergessen werden, dass SVG-Grafiken on the fly erzeugt werden. Der Vorgang erfordert Rechenzeit und Rechenpower. Anders als beim Abspielen von Video oder bei der JPEG-Komprimierung gibt es keine Hardware-Unterstützung für das Rendern von SVG.

c3ebf81a09ed47318c76d67cbd548f2c