Ladezeit: SVG optimieren für die Webseite

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"

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.

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. Gruppen von Objekten mit dem SVG G-Element (group) zusammenfassen, um sie an anderer Stelle als Kopie einzusetzen. 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.