Ladezeit: SVG optimieren für die Webseite

SVG optimieren: Dateigröße verkleinern, überflüssige Attribute entfernen: SVG optimiert

SVG-Grafiken aus Inkscape und Adobe Illustrator sind vollgepackt mit Attributen, die für die Anzeige in Webseiten nicht gebraucht werden und die Ladezeit verlängern. Wie läßt sich SVG optimieren?

Warum sollte man SVG optimieren für bessere Ladezeiten? Obwohl SVGs meist kleiner als PNG- oder JPEG-Grafik sind, dürfen wir nicht übersehen, dass der Browser SVG on the fly rendern muss. Für JPG, Javascript Canvas und Video hingegen gibt’s Hardware-Unterstützung. Wir wollen den Browsern keine überflüssigen Einstellungen zumuten.

Überflüssige Attribute

Inkscape und Illustrator agieren ähnlich wie Dreamweaver in der HTML4-Zeit: Alle Eventualitäten werden durch einen Schwung von Attributen bzw. CSS-Stilen abgefangen, die sowieso bereits in SVG eingebaut sind (z.B. fill-opacity: 1; opacity: 1; font-weight: normal).

SVG ist Klartext – SVG sieht aus wie HTML, das eine andere Sprache spricht. Mit einem Programmeditor und einfachen Ersetzungsregeln lassen sich viele der überflüssigen Attribute durch Suchen und Ersetzen entfernen. Bei Text wird das SVG-Markup vom CSS geradezu überwältigt.

  • font-style: normal
  • font-weight: normal
  • line-height:125%
  • text-align:start
  • letter-spacing:0px
  • word-spacing:0px;text-anchor:start
  • fill-opacity: 1
  • stroke-linecap: butt
  • stroke-linejoin: miter
  • stroke-miterlimit: 4
  • stroke-opacity: 1
  • stroke-dasharray: none

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

id="\w+" ersetzen durch ""

Schon beim Anlegen und Speichern der SVG-Grafik gibt es Tricks, die den Browsern das Leben einfacher machen, SVG für kürzere Ladezeiten und einen schnellen Aufbau der Grafik optimieren:

  • Grafik groß anlegen, so dass die Fließkommastellen keine wichtige Rolle spielen und die Stellen hinter dem Komma in der SVG-Ausgabe auf zwei oder drei beschränken – besser noch: so groß, dass die Nachkommastellen komplett entfernt werden können (siehe Kommentar von Andy).
  • »Leere Defs aufräumen« bzw. in neueren Version »Dokument säubern« aus dem Dateimenü von Inkscape löscht Verläufe und Muster, die nicht mehr gebraucht werden.
  • SVG mit Inkscape als normales SVG speichern (unter den Vorgaben von Inkscape) spart die überflüssigen Sodipodi-Attribute, die eine Grafik locker auf die doppelte Dateigröße aufblasen.
  • Noch mehr spart das Speichern als optimiertes SVG in Inkscape – ganz ganz weit unten in der langen Liste der Speicheroptionen für SVG-Dateien.

SVG Namespace

Die Attribute für den Namespace der SVG-Editoren werden für die Darstellung in Webseiten nicht benötigt:

  • xmlns:svg=­“http://www.w3.org/­2000/svg“
  • xmlns:inkscape=­“http://www.inkscape.org/­namespaces/inkscape“
  • xmlns:dc=­“http://purl.org/dc/­elements/1.1/“
  • xmlns:cc=­“http://creativecommons.org/ns#“
  • xmlns:rdf=­“http://www.w3.org/1999/­02/22-rdf-syntax-ns#“

SVG Metadaten

Inkscape legt beim Speichern der Grafik Metadaten an, die nur selten ausgefüllt werden.

  <metadata id="metadata5259">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs id="defs5257" />

Wenn das SVG inline in die Seite gesetzt wird, ersetzt ein title-Tag die metadata-Sequenz und agiert ähnlich wie das alt-Attribut in img-Tags.

Attribute des SVG-Tags

Im SVG-Tag selbst sitzen sowohl bei Illustrator als auch bei Inkscape ebenfalls überflüssige Attribute.


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"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
xmlns:svg="http://www.w3.org/2000/svg"
version="1.1"

Wenn das SVG mit einem img-Tag geladen wird, braucht das SVG-Tag nur zwei zusätzliche Angaben.

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 500 700"
     width="100%" height="100%">

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

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.

Das spart zwischen 30 bis 50% der Dateigröße, macht aber natürlich viel Arbeit und ist fehleranfällig.

SVG Online Optimizer

Mit dem komfortablen Online-Optimizer von jakearchibald auf Github lässt sich SVG optimieren ohne manuelle Eingriffe: schöne grafische Oberfläche, SVG rein, optimiertes SVG raus. Die Grafiken lassen sich nach der Reduzierung immer noch mit Inkscape bzw. Adobe Illustrator öffnen. Das Sparpotential liegt ebenfalls bei 30 bis 50%, aber SVGOMG ersetzt die mühevolle Handarbeit.

SVG Online-Optimierung
Vorher: 87 KB, nachher: 50 KB

Die SVG-Grafik sieht nach der Optimierung bis zum Haarstrich perfekt genauso aus wie vorher.

SVG use – Elemente kopieren

Bei Elementen, die sich wiederholen, spart SVG use (Kopieren) weitere Kilobytes. Beim Fujijama entfällt mehr als die Hälfte der Speicherlast durch Kopieren der Bäume. Die Variationen entstehen durch transform, scale und skew.

<use xlink:href="#g1" transform="translate(300,1300)" />
<use xlink:href="#g1" transform="translate(1100,1200) scale(-1,1.3) skewX(30)" />
<use xlink:href="#g1" transform="translate(2900,1350) scale(0.9) skewX(30)"/>

Am Ende sind von den ursprünglichen 87 KB noch knapp 20 KB übrig.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

10 Gedanken zu „Ladezeit: SVG optimieren für die Webseite“

  1. sipe – 23. Januar 2017

    Meinen Dank an Autor und Kommentatoren! Vom Problem zur Lösung in unter 100 Sekunden… Love it!

  2. Christophe – 31. Oktober 2016

    Alles so kompliziert … in Inkscape nicht speichern als Inkscape-SVG, nicht speichern als „Normales SVG“ sondern als
    „Optimiertes SVG“.

    Das steht ziemlich weit unten in der Liste (warum auch immer). Dann kann man Nachkommastellen bestimmen, überflüssige Stile sofort löschen, alle style-Attribute direkt als SVG-Attribute schreiben lassen und erspart das ganze Gemurkse.
    Christophe

    • Haessler – 8. November 2016

      Sorry, dass ich jetzt erst antworte: Stimmt! Das optimierte SVG ist sofort deutlich kleiner und die CSS-Properties sind jetzt als SVG-Attribute geschrieben, die Dezimalstellen begrenzt. Super!

  3. andy – 14. Oktober 2016

    die kilimanscharo-svg mit den kirschbäumen kann man NOCHMAL um ca. 40% optimieren, wenn man die nachkommastellen (nach dem punkt) der knotenpunkte entfernt mit einem editor… ODER im grafikprog selbst… bei inkscape „Gitter anzeigen“ und ALLE Knotenpunkte und „Anfasser für Bezier“ am Gitter ausrichten, direkt auf die schnittpunkte der „Pixel“…. anonsten habt ihr einen sehr guten internetauftritt… gefällt mir

    • Haessler – 15. Oktober 2016

      Hallo Andy, den Tipp mit dem Gitter und dem Anfasser für Beziér kannte ich noch nicht. Ich entferne die Nachkommastellen im Editor mit GREP (wobei man immer aufpassen muss).
      Auf jeden Fall hast du recht. SVG immer groß genug anlegen, dass die Nachkommastellen keine Rolle spielen. Und danke für das Kompliment. Das Wochenende fängt gut an. Ulrike

      • andy – 23. Oktober 2016

        Schmunzel, ich habe mir einen cronjob angelegt der jeden tag n shellscript ausfuehrt und aus einzelnen utf8 files aus dem ordner ‚asia‘ zufaellig svgs generiert… aber spass beiseite… die kilimanscharo svg bekommt man auf max 5k runter.. weniger traffic.. ibs. fuer handheld-user, bei denen der speed gedrosselt wird, bei erreichen eines datenvolumens X.
        Bei height und width stimme ich zu (grösser ist besser), ABER schon beim erstellen sollten auch darauf achten, dass sich einzelne elemente nicht überlagern, die „überdeckten“ Elemente „kosten“ (zuviel Bytes)… ich vermute jedoch, du hast eine Sammlung einzelner Elemente 😉
        gruss andy

    • Haessler – 25. Oktober 2016

      SVG use für die Bäume … das versenkt beim Fujijama (da ist auch Schnee drauf) noch einmal die Hälfte der Kilobytes. Das lohnt sich 🙂

  4. Nobby Dick – 16. Februar 2016

    Die App von jakearchibald bringts wirklich. Danke für den Tipp!

    Nobby
    immer auf der Jagd nach Capt’n Web

  5. Watson – 4. März 2015

    Ich benutze Sketch, das wirft auch jede Menge Attribute und überflüssige Tags aus und wird von SVGOMG super klein gemacht und immer auf eine Zeile gesetzt, dann sieht das HTML nicht mehr so schlimm aus. Wird Text in SVG von den Suchmaschinen gelesen oder ignoriert?
    Emma

    • Haessler – 5. März 2015

      Ich habe sogar schon Text aus SVG-Grafiken in den Ergebnissen einer Suche gefunden. Scheint so, als würde die Robots keinen großen Unterschied zwischen <div> und <text> machen.