Was ist SVG?
SVG steht für Scalable Vector Graphics und ist ein Dateiformat für Vektorgrafiken. Es basiert auf XML und kann von nahezu allen Browsern gelesen werden. Auf Basis der festgelegten Attributwerte setzen geeignete Programme (bspw. ein Web Browser) einfache grafische Elemente in einem Koordinatendatensystem zu einem Bild zusammen. Vereinfacht ausgedrückt, zeichnet das Programm das Bild anhand der Datenvorgabe selbst nach. Dadurch haben Vektorgrafiken gegenüber pixelbasierten Grafiken den Vorteil, dass sie in unendlichen Maßen skalierbar sind. In der Web-Entwicklung überzeugen sie durch eine unvergleichbare Schärfe in allen Auflösungen. Vor dem Hintergrund großer Unterschiede bei den verwendeten Bildschirmauflösungen und -abmessungen der Webseitenbesucher, kann die Verwendung von Vektorgrafiken eine attraktive Option darstellen. Allerdings ist das Dateiformat nur für einfache Grafiken geeignet. Die Farbdarstellung ist sehr simpel und findet ihre Grenzen bei der Darstellung komplexer Farbverläufe. Geeignet ist SVG somit überwiegend für Logos und Icons.
Warum sollte optimiert werden?
Auch wenn die Ausgabe der Bilder problemlos zu funktionieren scheint, sieht es im Markup anders aus. Das Markup von SVG beinhaltet eine Vielzahl an Informationen. Dabei sind einige dieser Informationen nicht immer relevant. Wird das XML einer SVG direkt im HTML eingebunden, kann die Übersichtlichkeit durch irrelevante Informationen beeinträchtigt und das Arbeiten mit dem Markup erschwert werden. Gerade der Einsatz von Vektorprogrammen wie bspw. Adobe Illustrator oder Inkscape zur Erzeugung einer SVG Datei sorgt häufig dafür, dass das XML viele Informationen enthält, die für die Darstellung des Bildes nicht erforderlich sind. Oft werden von den Programmen zusätzliche Kommentare oder viele Leerzeilen hinzugefügt.
Das aktive Vermeidung von "Dead Code" schließt die Optimierung von SVG Dateien ein. Durch die Reduktion auf das Wesentliche wird das gesamte Template verständlicher und nachvollziehbarer. Irrelevante Information hingegen erhöhen die benötigte Zeit, um bestimmte Informationen zu finden oder gezielte Anpassungen vorzunehmen. Deshalb sind irrelevante Daten zu vermeiden. Außerdem sind die verfügbaren Bandbreiten, insbesondere im Mobilnetz, begrenzt, sodass irrelevante Informationen die Ladezeit der Webseite unnötig erhöhen.
Die SVG Optimierung schafft dabei Abhilfe. Mit der Optimierung wird ein schnelleres Arbeiten ermöglicht. Das Markup wird auf das Wesentliche reduziert und übersichtlich dargestellt. Es kann leichter verstanden und Elemente können einfacher angepasst oder ausgetauscht werden. Ebenfalls wird die Datei kleiner, was zusätzlich die Ladezeiten begünstigt und die Performance der Webseite verbessert.
Die Optimierung mit SVGO
Für die Optimierung des Codes von SVG mit SVGO gibt es ein GitHub Projekt, welches als mpm Package installiert wer den kann. Sobald dieses installiert ist, kann die Optimierung mit dem SVGO Befehl und dem Dateinamen der zu optimierenden Datei, über die Shell auf Unix-Systemen ausgeführt werden:
svgo beispiel.svg
Bei Ausführung des Befehls wird das optimierte Markup in einer Zeile ausgegeben. Die Verwendung der Option führt eine Autoformatierung vor der Ausgabe durch:
_svgo --pretty beispiel.svg_
Die Autoformatierung ermöglicht bspw. die Ersetzung von width und height Attributen durch entsprechende viewport Werte, welche das SVG erreichbar für bestimmte CSS Anweisungen macht. Bei der Verwendung im HTML ist das xmlns Attribut nicht zwingend erforderlich. Dies kann durch eine entsprechende Option entfernt werden.
Das Tool bietet viele weitere Optimierungsmöglichkeiten, die entweder direkt in die Kommandezeile eingegeben werden können, oder per Konfigurationsdatei angewendet werden können. Sind die Einstellungen in der Konfigurationsdatei richtig hinterlegt, gilt es nur noch diese anzuwenden:
svgo --pretty beispiel.svg --config= beispielsvgo.yml
Die Verwendung einer Konfigurationsdatei ist besonders von Vorteil, wenn viele Einstellungen von den Standardwerten abweichen.
Fügt man nun das optimierte Markup in ein HTML Template ein, ist es kurz, bündig und übersichtlich.
Alternativ gibt es das Tool auch als Webapp, welche eine grafische Nutzeroberfläche zur Nutzung bietet.