SVG-Optimierung: Größe von Vektorgrafiken reduzieren und Ladezeit verbessern

Was ist eigentlich eine SVG?

In unserem heutigen Artikel geht es nicht um WordPress direkt, sondern um die immer öfter verwendeten Scalable Vector Graphics, kurz SVG genannt. Die skalierbaren Vektorgrafiken basieren auf XML, sind also kinderleicht aufgebaut und mit einem Texteditor entsprechend einfach editierbar.

Der Clou an SVGs ist, dass sie eben frei skalierbar sind. Ein Icon in 12px, sieht auch in 120 Pixeln noch knackscharf aus. Weil die entsprechenden Bildinformationen direkt in der Datei hinterlegt sind, die eine verlustfreie Skalierung ermöglichen.

Das Problem mit SVG-Dateien

Was eine SVG-Datei nun genau ist, wäre damit schon einmal geklärt, auch was genau sie so lohnenswert macht. Das große Problem aber wurde noch nicht besprochen, denn so skalierbar Vektorgrafiken im Web auch sind, so groß können sie ausfallen. Je mehr Informationen und Details, desto umfangreicher die entsprechende SVG.

Damit die Größe bestmöglich reduziert wird, möchte ich die einzelnen Bestandteile einer typischen SVG-Datei einmal mit euch durchgehen und währenddessen aufzeigen, was problemlos gelöscht werden kann, was überflüssig ist, worauf ihr unter Umständen einfach verzichten könnt.

Wie öffnet man eine SVG?

Um eine SVG zu bearbeiten, müsst ihr sie, wie oben schon erwähnt, erst einmal in einem Texteditor öffnen. Zum Glück ist das heute absolut kein Problem, denn jeder Editor beherrscht das XML-basierte Format. Der Inhalt scheint zunächst ein wenig unklar und Konfus zu sein, doch schauen wir uns die einzelnen Bestandteile einer SVG mal genauer an. Vieles ist nämlich Überflüssig, oder im Einzelfall schlichtweg nicht nötig. Anderes macht Sinn und sollte daher erhalten bleiben.

SVG-Optimierung fürs Web

Als Basis für den Versuch, eine SVG-Datei so weit es geht zu reduzieren, haben wir uns, ganz passend zum Blog, für das Wordpress Logo entschieden. Die SVG-Datei sieht so aus und hat eine Größe von 1 Kilobyte. Ziel ist es nun, den Code für die direkte Einbindung, aber auch die Größe selbst zu reduzieren.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<path fill="#444444" d="M4.681 16.27c0 4.473 2.6 8.342 6.371 10.171l-5.391-14.773c-0.628 1.407-0.98 2.962-0.98 4.602zM23.616 15.699c0-1.397-0.503-2.365-0.932-3.118-0.573-0.932-1.109-1.719-1.109-2.652 0-1.039 0.785-2.006 1.898-2.006 0.048 0 0.097 0.007 0.145 0.010-2.010-1.842-4.689-2.968-7.632-2.968-3.95 0-7.424 2.027-9.444 5.096 0.266 0.008 0.515 0.014 0.727 0.014 1.183 0 3.013-0.145 3.013-0.145 0.608-0.034 0.68 0.859 0.071 0.932 0 0-0.611 0.071-1.293 0.108l4.117 12.243 2.474-7.418-1.762-4.825c-0.609-0.037-1.185-0.108-1.185-0.108-0.61-0.037-0.537-0.966 0.073-0.932 0 0 1.865 0.145 2.976 0.145 1.182 0 3.014-0.145 3.014-0.145 0.607-0.034 0.679 0.859 0.070 0.932 0 0-0.611 0.071-1.292 0.108l4.085 12.15 1.128-3.766c0.573-1.47 0.861-2.686 0.861-3.655zM16.184 17.259l-3.393 9.856c1.012 0.297 2.082 0.459 3.194 0.459 1.315 0 2.579-0.228 3.754-0.642-0.030-0.048-0.058-0.099-0.081-0.154l-3.474-9.519zM25.904 10.846c0.050 0.361 0.078 0.747 0.078 1.164 0 1.146-0.215 2.435-0.861 4.049l-3.453 9.981c3.36-1.958 5.619-5.598 5.619-9.769 0-1.967-0.502-3.814-1.384-5.425z"></path>
</svg>

Im Grunde bedeutet das, einfach alles zu entfernen was überflüssig ist, oder entsprechende Werte so weit es geht zu minimieren bzw. zu verkürzen. Was genau die Parameter bedeuten, klären die folgenden Absätze.

xml version=””
Möchtet ihr die SVG Inline in eurem Code verwenden, benötigt ihr die Angabe der XML Version nicht.

<!– Kommentare –>
Kommentare können und sollten immer entfernt werden, ganz egal in welchem Dateityp. Sie sind Ballast, es sei denn ihr braucht sie im Code, für eine ordentliche Protokollierung, oder um euch zurechtzufinden. In diesem Fall gibt der Kommentar nur Adobe Illustrator als Generator der SVG aus. Vollkommen überflüssig.

!DOCTYPE
Dasselbe wie bei der XML Version, gilt auch beim Doctype. Wer SVGs inline einbaut, braucht die Angaben nicht und kann sie dementsprechend entfernen.

viewBox=””
Ebenfalls nur nötig, wenn die SVG nicht inline verwendet wird. Ansonsten kann auch die Viewbox einfach entfernt werden. Je nach Typ von SVG, versteht sich.

style=”enable-background”
Theoretisch für Effekte gedacht, wird das Attribut nur vom IE10+ unterstützt. Also weg damit.

xmlns=”http://www.w3.org/2000/svg”
Auch dieser Eintrag dient wieder nur der Notwendigkeit, wenn die SVG als externe Datei genutzt wird. Wer sie sauber und effektiv inline unterbringt, kann diesen Eintrag daher löschen.

xmlns:xlink=”https://www.w3.org/1999/xlink”
Weg damit. Vollkommen überflüssig und ohne mir bekannte Verwendung.

id=”layer”
Im Beispiel nicht vorhanden, aber häufig vertreten, ist die Layer ID. Selbige kann problemlos entfernt werden. Allerdings ist der entsprechende Layer dann nicht mehr korrekt benannt, solltet ihr die Grafik erneut öffnen. Das gilt übrigens auch für ähnliche Angaben. Manchmal folgen im Bereich von Layer auch noch »name=””« oder »type=””«. Auch solche Angaben könnt ihr entfernen.

X,Y Attribute
Je nachdem ob ihr sie braucht oder nicht, können sie entfernt werden. Im Normalfall geben die Attribute die Position an, sind aber überflüssig, weil ein korrekt erstelltes SVG sie gar nicht erst benötigt.

width, height
Die Werte bei Width und Height geben, genau wie bei HTML, die Größe des Bildes an. Wer die SVG mit CSS anpasst, braucht sie nicht und kann die Werte dementsprechend entfernen.

xml:space=”preserve”
Steuert den white-space und kann problemlos gelöscht werden.

Werte aufrunden/abrunden
Das Wichtigste in unseren Augen ist, dass ihr eventuell absurd lange Werte aufrundet bzw. abrundet. Manchmal enthält eure SVG Angaben wie »9.1554293825408« und aus solchen Werten macht ihr dann besser eine »9« oder bei »9.985542825408« von mir aus auch eine »10«. Kürzer und fast identisch. Kommt natürlich auf das SVG an, geht aber fast immer problemlos, je nachdem wo genau der Wert untergebracht ist.

Das optimierte Resultat

Als Resultat kommt dann folgender, minimaler Code dabei heraus. Deutlich reduzierter als das Original, demnach auch flotter zu laden. Inline funktioniert er problemlos, wie die hier nun komplett eingebundene SVG zeigen sollte. Statt 1 Kilobyte, sind es in diesem Falle auch nur noch knappe 700 Bytes.

Also 30 Prozent Größenreduzierung, was für ein Bild oder eine Grafik schon sehr viel ist. Die Grafik selbst wurde hier aus Platzgründen zwar nur klein eingebunden, ist als SVG aber in jede Größe, bei gleichbleibender Qualität skalierbar.

Optimiert
<svg><path fill="#444" d="M4.68 16.27c0 4.47 2.6 8.34 6.37 10.17l-5.4-14.77c-.62 1.4-.97 2.96-.97 4.6zm18.94-.57c0-1.4-.5-2.37-.94-3.12-.57-.93-1.1-1.72-1.1-2.65 0-1.04.78-2 1.9-2h.14c-2-1.84-4.7-2.97-7.63-2.97-4 0-7.5 2.04-9.5 5.1h.7c1.2 0 3-.13 3-.13.6-.03.7.86.1.93 0 0-.6.07-1.3.1l4.1 12.24 2.4-7.4-1.7-4.8c-.6 0-1.2-.1-1.2-.1-.6 0-.54-.93.1-.9 0 0 1.84.15 2.95.15 1.2 0 3.04-.15 3.04-.15.6-.04.7.85.1.92 0 0-.6.08-1.3.1l4.1 12.17 1.1-3.8c.6-1.5.9-2.7.9-3.7zm-7.44 1.56l-3.4 9.85c1.02.3 2.1.5 3.2.5 1.32 0 2.58-.2 3.76-.6l-.08-.1-3.48-9.5zm9.72-6.4c.05.35.08.73.08 1.15 0 1.2-.2 2.5-.86 4.1l-3.45 10c3.36-1.9 5.62-5.6 5.62-9.7 0-1.95-.6-3.8-1.4-5.4z"/></svg>

Original
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<path fill="#444444" d="M4.681 16.27c0 4.473 2.6 8.342 6.371 10.171l-5.391-14.773c-0.628 1.407-0.98 2.962-0.98 4.602zM23.616 15.699c0-1.397-0.503-2.365-0.932-3.118-0.573-0.932-1.109-1.719-1.109-2.652 0-1.039 0.785-2.006 1.898-2.006 0.048 0 0.097 0.007 0.145 0.010-2.010-1.842-4.689-2.968-7.632-2.968-3.95 0-7.424 2.027-9.444 5.096 0.266 0.008 0.515 0.014 0.727 0.014 1.183 0 3.013-0.145 3.013-0.145 0.608-0.034 0.68 0.859 0.071 0.932 0 0-0.611 0.071-1.293 0.108l4.117 12.243 2.474-7.418-1.762-4.825c-0.609-0.037-1.185-0.108-1.185-0.108-0.61-0.037-0.537-0.966 0.073-0.932 0 0 1.865 0.145 2.976 0.145 1.182 0 3.014-0.145 3.014-0.145 0.607-0.034 0.679 0.859 0.070 0.932 0 0-0.611 0.071-1.292 0.108l4.085 12.15 1.128-3.766c0.573-1.47 0.861-2.686 0.861-3.655zM16.184 17.259l-3.393 9.856c1.012 0.297 2.082 0.459 3.194 0.459 1.315 0 2.579-0.228 3.754-0.642-0.030-0.048-0.058-0.099-0.081-0.154l-3.474-9.519zM25.904 10.846c0.050 0.361 0.078 0.747 0.078 1.164 0 1.146-0.215 2.435-0.861 4.049l-3.453 9.981c3.36-1.958 5.619-5.598 5.619-9.769 0-1.967-0.502-3.814-1.384-5.425z"></path>
</svg>

Online-Tool zur SVG-Optimierung

Wer auf Handarbeit keine Lust hat, kann für die Optimierung von SVGs auch ein Online-Tool verwenden. Nicht jeder Bildoptimierer unterstützt SVG als Format, eines haben wir aber gefunden und nutzen es hin und wieder auch selbst. SVGomg nennt sich das Tool, welches die SVG-Optimierung für euch übernimmt. Einfach die Datei, oder direkt den entsprechenden Code einfügen. Anschließend lassen sich mit den Schiebereglern, sämtliche Faktoren der SVG steuern und beeinflussen.

Sehr praktisch. Ein gelungenes Online-Tool also, wobei es das in der Regel nicht braucht, da die Optimierung ja zum Großteil aus dem Löschen der überflüssigen Informationen besteht. Das sollte jeder auch von Hand hinbekommen.

Wie immer gilt es zu reduzieren

Am Ende ist es auch bei den SVGs wieder so, dass die Reduzierung den eigentlichen Vorteil in Sachen Ladezeit bringt. Wie so oft, heißt es also auch bei den SVGs wieder, Überflüssiges von Board zu werfen, um an Geschwindigkeit zu gewinnen.

Eine Simple Regel, die viele aber immer wieder missachten, indem sie Unmengen Plugins, Bilder, Videos und Funktionen integrieren. Weniger ist mehr, vor allem bei einem hohen Besucheraufkommen. Also immer an die Reduzierung denken.