So lässt sich das Erstellen und Exportieren von SVGs für das Web optimieren

Mit 9 Tipps zu besseren SVGs für das Web
Kommentare

SVGs erfreuen sich einer immer größeren Verbreitung bei der Nutzung von Bildern im Web. Erstellt werden sie meist von Webdesignern, in die Website eingebunden oder animiert werden sie allerdings von den Webentwicklern. Weil SVG aber sowohl als Bildformat als auch als Dokument-Format dienen kann, kommt es hierbei oft zu Problemen – nicht zuletzt, wenn der Designer nur ein rudimentäres Verständnis des zum SVG dazugehörigen Codes hat.

So beeinflusst jede Änderung der Designer beim Erstellen des SVGs im Grafik-Editor (zum Beispiel Adobe Illustrator) direkt den daraus resultierenden Code mit dem die Entwickler anschließend arbeiten müssen. Darum ist es wichtig, bereits beim Erstellen und Exportieren von SVGs für das Web auf einige grundlegende Dinge zu achten, um für einen möglichst sauberen Code zu sorgen.

9 Tipps für das richtige Erstellen von SVGs

Werden SVGs in einem Responsive Webdesign genutzt, erfolgt das Erstellen und die Integration in das Design meist in einer jeweils voneinander getrennten Design- und Entwicklungsphase. Das Problem dabei: oft können die Entwickler die vom Designteam gelieferten SVGs nicht direkt skripten, weil der Code – und vor allem etwaige Animationen – nicht dafür optimiert sind. Der Grund dafür ist meist, dass die Grafikdateien falsch exportiert wurden.

Es ist darum wichtig, auf das richtige Erstellen und Exportieren zu achten. Sara Soueidan hat gleich neun Tipps und Tricks dazu zusammengefasst. Dazu gehört zum Beispiel:
1.

Shapes-Elemente statt <path> nutzen


Für die Darstellung verschiedener Formen bieten SVGs unterschiedliche Möglichkeiten, zum Beispiel Shape-Elemente oder das Erstellen beliebiger Formen mit <path>. Vor allem Shape-Elemente bieten einige Vorteile; zur Verfügung stehen etwa <circle>, <ellipse>, <line>, <rect>, <polygon> und <polyline>. Sie sind leichter lesbar sowie besser maintainable und veränderbar als die ebenfalls beliebte Methode mit <path>. Ebenso lassen sich mithilfe von Attributen die Position und Dimensionen der Form-Features kontrollieren, was auch eine spätere Veränderung oder Animation der erstellten Form vereinfacht. Zudem wird in den meisten Fällen weniger Code für das Erstellen von Shapes benötigt, als wenn die gleiche Form mit einem <path>-Element erstellt wird.
2.

Text in Outlines konvertieren – oder auch nicht?


Text innerhalb einer SVG-Datei lässt sich mit dem Grafik-Editor der Wahl leicht in Outlines konvertieren. Die Frage, die man sich dabei stellen sollte, ist jedoch, ob das sinnvoll ist. Der größte Vorteil dabei ist, dass die genutzte Schrift erhalten bleibt und man nicht auf die Nutzung einer Web-Font angewiesen ist. Gerade in Logos kann das nützlich sein, um das Branding nicht durch eine möglicherweise unpassende Fallback-Lösung zu verwässern.

Allerdings gibt es auch einige Gründe, die dagegen sprechen. Dazu zählt vor allem, dass zu Outlines konvertierter Text kein echter Text mehr ist, sondern nur eine mithilfe mehrerer Pfade erstellte Kontur des Ursprungstextes. Dadurch ist der Text weder accessible, noch kann er durchsucht oder ausgewählt werden – und wird so für User von Screen Readern schnell zum Problem, weil diese ihn nicht aufnehmen können. Ebenso wird das Erstellen von Animationen erschwert; zudem steigt die Größe der SVG-Datei meist deutlich an.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Ob man Text in Outlines konvertieren sollte, hängt also vom eigenen Projekt ab; grundsätzlich gilt aber, dass Accessibility und Dateigröße – und damit die Performance – beim eigenen Webprojekt eine wichtige Rolle spielen und darum idealerweise auf die Konvertierung verzichtet werden sollte.
3.

Pfade vereinfachen


Grundsätzlich ist ein Pfad durch eine Gruppe Punkte definiert, die wiederum jeweils durch mehrere Koordinaten definiert werden. Je weniger Punkte es gibt, desto weniger Pfad-Daten gibt es – und desto geringer ist die Dateigröße. Davon profitiert vor allem die Performance. Darum können Pfade vereinfacht werden, indem die Anzahl der Punkte reduziert wird:

Tweak the number to get to the minimum number of points while preserving (or sacrificing) as much of the path’s visual appearence as you need.

Ebenso können Pfade mithilfe verschiedener Tools wie etwa dem Warp Tool vereinfacht werden.
4.

Das Zusammenlegen von Pfaden vermeiden


Viele Designer tendieren dazu, so oft wie möglich Pfade zusammenzulegen. Das hat zwar durchaus einige Vorteile, macht aber in vielen Fällen das Erstellen von Animationen deutlich schwieriger. Gerade, wenn Pfade einzeln kontrolliert oder animiert werden sollen, sorgt ein solches Zusammenlegen oft für Probleme. Darum ist es wichtig, bereits im Vorfeld klarzustellen, was in der Entwicklungsphase mit den Pfaden geschehen soll und sich dann für oder gegen das Zusammenlegen zu entscheiden.
5.

Filter mit SVG-Filtern erstellen – und nicht mit Photoshop-Effekten


Photoshop bietet Designern unzählige Möglichkeiten für die Bildbearbeitung. Besonders beliebt sind dabei die Filter. Sie werden von Illustrator als Raster-Image exportiert, was je nach Filter für Probleme mit der Darstellung sorgen kann. Anstatt sich auf die Photoshop-Filter zu verlassen, ist es darum ratsam, die gewünschten Efffekte mit SVG-Filtern als SVG-Code zu generieren.
6.

Artboard an die richtige Größe anpassen


Ein häufig auftretendes Problem ist die Größe von in Websites eingebetteten SVGs. Selbst wenn sie mit einer genauen Höhe und Breite versehen werden, erscheinen sie oft kleiner als spezifiziert. Das ist meist auf einen Überschuss an Whitespace um die Grafik im SVG-Viewport zurückzuführen. Um das zu vermeiden, sollte das Artboard gerade so groß sein, dass die Grafik hineinpasst – aber nicht größer. Die Größe des Artboards lässt sich in den Einstellung des Grafik-Editors anpassen.
7.

Benennung, Gruppierung, Layering


Eigentlich sollte es selbsterklärend sein: die IDs und Klassen, die Designer im Grafik-Editor verwenden, werden zu entsprechenden IDs- und Klassennamen im generierten Code übersetzt. Je sinnvoller diese Benennung ist, desto weniger Probleme haben die Entwickler bei der Arbeit mit dem generierten Code. Einfache Namen, mit denen sich Elemente und Gruppen voneinander unterscheiden lassen, helfen vor allem dann, wenn der Code per Hand bearbeitet wird. Mithilfe von Layern können Elemente gruppiert werden, die in direkter Relation zueinanderstehen. Vor allem Elemente, die im Ganzen animiert werden sollen, lassen sich so besonders leicht gruppieren.
8.

Die beste Export-Option für das Web wählen


Die meisten Grafik-Editoren bieten eine ganze Reihe von Exportoptionen, mit denen besserer SVG-Code generiert werden soll. Im Export-Dialog lassen sich die gewünschten Optionen festlegen; nicht alle sind dabei jedoch auch für SVGs nötig. Gerade bei der Arbeit mit mehreren SVG-Images bietet sich die Nutzung der „Use Artboards“-Option an, um SVG-Sprites zu erstellen. Je nachdem, ob eine oder mehrere SVG-Dateien exportiert werden sollen, unterscheidet sich die Art und Weise wie die SVG-Datei in die Website eingebettet wird.
9.

So viel und so früh wie möglich kommunizieren


Ebenfalls selbstverständlich sollte die Kommunikation zwischen Designer und Entwickler sein – und zwar so früh im Designprozess wie möglich. In den meisten Entwicklungsprozessen ist es üblich, dass Design und Entwicklung nicht vom gleichen Team durchgeführt werden. Damit die  Zusammenarbeit möglichst reibungslos klappt, sollten die Entwickler ihre Pläne für das benötigte SVG so früh wie möglich an die Designer weitergeben, damit diese sich darauf einstellen und ihr Design entsprechend durchführen können. Dazu sagt Sara Soueidan:

The very nature of SVG requires both design and development phases to be open to one another, and this, in turn, requires the designer(s) and developer(s) to talk, before the design process begins, and throughout the process as well.

SVGs optimieren

Während das richtige Erstellen und Exportieren von SVGs zwar wichtig ist, ist die Arbeit damit aber noch längst nicht getan. Zu den Best Practices bei der Arbeit mit SVGs gehört auch die Optimierung der Datei nach dem Export aus einem Grafik-Editor, zum Beispiel mit dem NodeJS-basierten Tool SVGO.

Allerdings sollte man immer genau überlegen, ob die Optimierung tatsächlich sinnvoll oder nötig ist. Denn während zwar das Optimieren von SVG-Dateien generell ratsam ist – insbesondere im Hinblick auf die Performance der Website – gibt es Fälle, wo besser darauf verzichtet wird. Dazu zählt beispielsweise die Animation der SVGs, für die eine bestimmte Dokument-Struktur aufgestellt wird. Diese wird nämlich bei der Optimierung mit SVGO verändert und ungenutzte Gruppen und IDs entfernt, was schnell zu Problemen mit der Bilddarstellung einer Website führt.

Auch hier gilt als Tipp: man sollte abwägen, was für das eigene Projekt sinnvoll ist. Werden bestimmte Strukturen des SVGs benötigt, sollte besser auf die Optimierung verzichtet werden; will man die Bilddateien möglichst gut für die Nutzung im Web vorbereiten, stehen zahlreiche nützliche Tools zur Verfügung. Einige davon haben wir euch übrigens bereits an anderer Stelle vorgestellt.

Aufmacherbild: website wireframe sketch and programming code on digital tablet von Shutterstock / Urheberrecht: ronstik

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -