So optimierst du SVG-Dateien für deine Website

So optimierst du SVG-Dateien für deine Website

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Man muss die SVG-Syntax nicht zwingend beherrschen, um Grafiken in das Webformat bringen zu können. Anwendungen wie Illustrator haben entsprechende Exportfunktionen. Und gerade für komplexe Grafiken ist es auch gar nicht sinnvoll oder machbar, diese per Hand auszuzeichnen. Aber bei generierten SVG-Dateien ist es nicht verkehrt, den Quelltext einmal zu überprüfen. Denn hier und da sind häufig Optimierungsmöglichkeiten vorhanden.

So optimierst du SVG-Dateien für deine Website

Einfache Formen verwenden

SVG kennt eine Vielzahl von Elementen zum Zeichnen von Formen. Neben „<rect>“, „<circle>“ und „<polygon>“ gibt es mit dem „<path>“-Element quasi einen Allrounder, der nicht nur Rechtecke, Kreise und Polygone zeichnen kann, sondern auch sehr komplexe Formen. Dennoch sollte man immer anstreben, nach Möglichkeit die einfache Form zu verwenden – bei einem Kreis also stets „<circle>“. Denn bei einfachen Formen braucht das „<path>“-Element aufgrund seiner Syntax mehr Platz.

<circle cx="75" cy="75" r="75" />
<path d="M75,0C33.6,0,0,33.6,0,75c0,41.4,33.6,75,75,75s75-33.6,75-75C150,33.6,116.4,0,75,0z" />

Das Beispiel zeigt zweimal dieselbe Form. Das „<path>“-Element benötigt aber etwa dreimal so viel Quelltext. Illustrator sucht automatisch das sinnvollste Element – in diesem Fall „<circle>“. Sobald man beispielsweise per Pathfinder zwei Formen vereint oder eine Form abzieht (zum Beispiel eine Aussparung innerhalb des Kreises erstellt), kommt nur noch das „<path>“-Element in Frage.

svg-optimieren_pathfinder
Pathfinder in Illustrator

Illustrator erzeugt jedoch nur aus nicht bearbeiteten Kreisen auch ein „<circle>“-Element. Sobald ein Kreis per Pathfinder behandelt wurde, wird dieser als „<path>“ ausgegeben. Das gilt auch, wenn es sich augenscheinlich um einen einfachen Kreis handelt, also gar keine tatsächliche Veränderung per Pathfinder durchgeführt wurde.

Pfade kombinieren

Wenn Formen dasselbe Aussehen besitzen, kann es sinnvoll sein, diese zu einem Pfad zu kombinieren. Wie erwähnt, wird dazu zwingend das „<path>“-Element erzeugt. Aber wenn die einzelnen Formen aufgrund ihrer Komplexität ohnehin per „<path>“ ausgezeichnet sind, spielt das keine Rolle.

Werden Pfade per Pathfinder vereint, wird nur noch ein „<path>“-Element benötigt. Auch das Aussehen muss in diesem Fall nur noch einmal festgelegt werden. Der Nachteil ist natürlich, dass die einzelnen Formen nicht mehr bearbeitbar sind.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Pfade vereinfachen

Illustrator bietet die Möglichkeit, Pfade zu vereinfachen. Hierbei wird die Anzahl der Punkte eines Pfades reduziert. Diese Funktion solltest du indes nur mit Vorsicht verwenden. Denn nicht jeder Punkt, der dabei weggelassen wird, ist tatsächlich verzichtbar. Dennoch kann gerade bei sehr komplexen Formen eine Reduzierung der Pfade zu einer schlankeren SVG-Datei führen.

svg-optimieren_vereinfachen
Pfade vereinfachen für weniger Punkte

Je nach Form kann ein Pfad schon einmal auf ein Drittel seiner Punkte reduziert werden. Gerade bei Bitmaps, die in Pfade umgewandelt wurden, oder sehr komplexen und detailreichen Grafiken kann sich das lohnen. Hier musst du natürlich sehr genau schauen, welche Details verzichtbar sind.

Zeichenfläche für „viewBox“ anpassen

Illustrator setzt für alle SVG-Dateien das „viewBox“-Attribut. Dieses sorgt dafür, dass eine SVG-Grafik unterschiedlich skaliert und beschnitten werden kann. Sinnvoll ist, wenn die Breite und Höhe der „viewBox“ identisch ist mit der Größe der Formen. Da die Maße der „viewBox“ aus der Zeichenfläche von Illustrator erzeugt werden, sollte die Zeichenfläche den darin platzierten Elementen entsprechen.

svg-optimieren_zeichenflaeche
Zeichenfläche an Objekte anpassen

Mit Illustrator kannst du die Zeichenfläche einfach anpassen, indem du im „Objekt“-Menü den Punkt „Zeichenflächen“ und „an ausgewählte Grafik anpassen“ auswählst. Andernfalls wird als „viewBox“ die automatisch vorgegebene oder manuell gesetzte Zeichenfläche verwendet. Im Normalfall ist dies das A4-Format.

Aussehen per Attribut oder Stylesheets bestimmen

Während Position und Größe einer Form immer über Attribute innerhalb des SVG-Elementes definiert werden, gibt es für das Aussehen unterschiedliche Möglichkeiten. So kannst du die Füllfarbe beispielsweise über das Attribut „fill“ direkt im Element definieren. Alternativ dazu kannst du ein Stilattribut verwenden. Hierbei bündelst du alle Angaben wie Füll- und Rahmenfarbe in einem „style“-Attribut.

<circle fill="#E1E04C" cx="75" cy="75" r="75"/>
<circle style="fill: #E1E04C;" cx="75" cy="75" r="75"/>

Als Letztes besteht die Möglichkeit, das Aussehen über ein eigenes Stilelement zu definieren. Der Vorteil hierbei besteht darin, dass Aussehen und Formelemente getrennt sind und das Aussehen per Klasse mehreren Elementen zugewiesen werden kann. Gerade bei komplexen Grafiken kann man sich so viel doppelten Quelltext sparen.

<style type="text/css">
 .st0 {fill:#E1E04C;}
</style>
<circle class="st0" cx="75" cy="75" r="75"/>

Für welche Möglichkeit du dich entscheidest, hängt von verschiedenen Faktoren ab – unter anderem davon, ob du per JavaScript das Aussehen dynamisch verändern möchtest. In diesem Fall bietet sich die Auszeichnung des Aussehens innerhalb des Elementes an.

svg-optimieren_stile
Auszeichnung des Aussehens festlegen

Kommentare entfernen und SVG komprimieren

Für den letzten Feinschliff solltest du etwaige Kommentare aus den SVG-Dateien entfernen. Gerade wenn du eine SVG-Datei generieren lässt, fügt die verwendete Anwendung gerne mindestens eine Kommentarzeile ein. Wer unnötigen Ballast grundsätzlich vermeiden möchte, wird hier sicher tätig werden.

Außerdem besteht die Möglichkeit, eine SVG-Datei per gzip zu komprimieren. Aus Illustrator heraus wird hierbei ein eigenes Dateiformat angeboten. Aber auch manuell kannst du eine SVG-Datei entsprechend komprimieren und mit der Endung „.svgz“ versehen. Der Browser entpackt die Datei automatisch.

Fazit

Es gibt viele Möglichkeiten, mit denen du deine SVG-Dateien optimieren kannst. Nicht immer lohnt sich der Aufwand. Aber je nach Komplexität einer Grafik und der Anzahl der verwendeten SVG-Dateien kann eine gute Optimierung durchaus zu bemerkenswerten Ergebnissen führen.

Übrigens: zum Themenkomplex “SVG und responsives Webdesign” haben wir hier bei Dr. Web ebenfalls einen Beitrag.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Uvi
Gast

Wer kein Illustrator hat oder sich den Aufwand sparen will, der kann auf dieses Optimierungswerkzeug zurückgreifen.

http://jakearchibald.github.io/svgomg/

Karl Marx
Gast

+1

trackback

[…] Ganz generell soltest du gerade für das mobile Internet auch bei SVG-Dateien auf möglichst kleine Dateien achten. […]

wpDiscuz