Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 14. Dezember 2015

So optimierst du SVG-Dateien für deine Website

So optimierst du SVG-Dateien für deine Website

Man muss die SVG-Syntax nicht zwin­gend beherr­schen, um Grafiken in das Webformat brin­gen zu kön­nen. Anwendungen wie Illustrator haben ent­spre­chen­de Exportfunktionen. Und gera­de für kom­ple­xe Grafiken ist es auch gar nicht sinn­voll oder mach­bar, die­se per Hand aus­zu­zeich­nen. Aber bei gene­rier­ten SVG-Dateien ist es nicht ver­kehrt, den Quelltext ein­mal zu über­prü­fen. Denn hier und da sind häu­fig Optimierungsmöglichkeiten vor­han­den.

So optimierst du SVG-Dateien für deine Website

Einfache Formen verwenden

SVG kennt eine Vielzahl von Elementen zum Zeichnen von Formen. Neben „<rect>“, „<cir­cle>“ und „<poly­gon>“ gibt es mit dem „<path>“-Element qua­si einen Allrounder, der nicht nur Rechtecke, Kreise und Polygone zeich­nen kann, son­dern auch sehr kom­ple­xe Formen. Dennoch soll­te man immer anstre­ben, nach Möglichkeit die ein­fa­che Form zu ver­wen­den – bei einem Kreis also stets „<cir­cle>“. Denn bei ein­fa­chen Formen braucht das „<path>“-Element auf­grund sei­ner 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 zwei­mal die­sel­be Form. Das „<path>“-Element benö­tigt aber etwa drei­mal so viel Quelltext. Illustrator sucht auto­ma­tisch das sinn­volls­te Element – in die­sem Fall „<cir­cle>“. Sobald man bei­spiels­wei­se per Pathfinder zwei Formen ver­eint oder eine Form abzieht (zum Beispiel eine Aussparung inner­halb des Kreises erstellt), kommt nur noch das „<path>“-Element in Frage.

svg-optimieren_pathfinder
Pathfinder in Illustrator

Illustrator erzeugt jedoch nur aus nicht bear­bei­te­ten Kreisen auch ein „<circle>“-Element. Sobald ein Kreis per Pathfinder behan­delt wur­de, wird die­ser als „<path>“ aus­ge­ge­ben. Das gilt auch, wenn es sich augen­schein­lich um einen ein­fa­chen Kreis han­delt, also gar kei­ne tat­säch­li­che Veränderung per Pathfinder durch­ge­führt wur­de.

Pfade kombinieren

Wenn Formen das­sel­be Aussehen besit­zen, kann es sinn­voll sein, die­se zu einem Pfad zu kom­bi­nie­ren. Wie erwähnt, wird dazu zwin­gend das „<path>“-Element erzeugt. Aber wenn die ein­zel­nen Formen auf­grund ihrer Komplexität ohne­hin per „<path>“ aus­ge­zeich­net sind, spielt das kei­ne Rolle.

Werden Pfade per Pathfinder ver­eint, wird nur noch ein „<path>“-Element benö­tigt. Auch das Aussehen muss in die­sem Fall nur noch ein­mal fest­ge­legt wer­den. Der Nachteil ist natür­lich, dass die ein­zel­nen Formen nicht mehr bear­beit­bar sind.

Pfade vereinfachen

Illustrator bie­tet die Möglichkeit, Pfade zu ver­ein­fa­chen. Hierbei wird die Anzahl der Punkte eines Pfades redu­ziert. Diese Funktion soll­test du indes nur mit Vorsicht ver­wen­den. Denn nicht jeder Punkt, der dabei weg­ge­las­sen wird, ist tat­säch­lich ver­zicht­bar. Dennoch kann gera­de bei sehr kom­ple­xen Formen eine Reduzierung der Pfade zu einer schlan­ke­ren SVG-Datei füh­ren.

svg-optimieren_vereinfachen
Pfade ver­ein­fa­chen für weni­ger Punkte

Je nach Form kann ein Pfad schon ein­mal auf ein Drittel sei­ner Punkte redu­ziert wer­den. Gerade bei Bitmaps, die in Pfade umge­wan­delt wur­den, oder sehr kom­ple­xen und detail­rei­chen Grafiken kann sich das loh­nen. Hier musst du natür­lich sehr genau schau­en, wel­che Details ver­zicht­bar 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 unter­schied­lich ska­liert und beschnit­ten wer­den kann. Sinnvoll ist, wenn die Breite und Höhe der „viewBox“ iden­tisch ist mit der Größe der Formen. Da die Maße der „viewBox“ aus der Zeichenfläche von Illustrator erzeugt wer­den, soll­te die Zeichenfläche den dar­in plat­zier­ten Elementen ent­spre­chen.

svg-optimieren_zeichenflaeche
Zeichenfläche an Objekte anpas­sen

Mit Illustrator kannst du die Zeichenfläche ein­fach anpas­sen, indem du im „Objekt“-Menü den Punkt „Zeichenflächen“ und „an aus­ge­wähl­te Grafik anpas­sen“ aus­wählst. Andernfalls wird als „viewBox“ die auto­ma­tisch vor­ge­ge­be­ne oder manu­ell gesetz­te Zeichenfläche ver­wen­det. Im Normalfall ist dies das A4-Format.

Aussehen per Attribut oder Stylesheets bestimmen

Während Position und Größe einer Form immer über Attribute inner­halb des SVG-Elementes defi­niert wer­den, gibt es für das Aussehen unter­schied­li­che Möglichkeiten. So kannst du die Füllfarbe bei­spiels­wei­se über das Attribut „fill“ direkt im Element defi­nie­ren. Alternativ dazu kannst du ein Stilattribut ver­wen­den. Hierbei bün­delst 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 eige­nes Stilelement zu defi­nie­ren. Der Vorteil hier­bei besteht dar­in, dass Aussehen und Formelemente getrennt sind und das Aussehen per Klasse meh­re­ren Elementen zuge­wie­sen wer­den kann. Gerade bei kom­ple­xen Grafiken kann man sich so viel dop­pel­ten Quelltext spa­ren.

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

Für wel­che Möglichkeit du dich ent­schei­dest, hängt von ver­schie­de­nen Faktoren ab – unter ande­rem davon, ob du per JavaScript das Aussehen dyna­misch ver­än­dern möch­test. In die­sem Fall bie­tet sich die Auszeichnung des Aussehens inner­halb des Elementes an.

svg-optimieren_stile
Auszeichnung des Aussehens fest­le­gen

Kommentare entfernen und SVG komprimieren

Für den letz­ten Feinschliff soll­test du etwai­ge Kommentare aus den SVG-Dateien ent­fer­nen. Gerade wenn du eine SVG-Datei gene­rie­ren lässt, fügt die ver­wen­de­te Anwendung ger­ne min­des­tens eine Kommentarzeile ein. Wer unnö­ti­gen Ballast grund­sätz­lich ver­mei­den möch­te, wird hier sicher tätig wer­den.

Außerdem besteht die Möglichkeit, eine SVG-Datei per gzip zu kom­pri­mie­ren. Aus Illustrator her­aus wird hier­bei ein eige­nes Dateiformat ange­bo­ten. Aber auch manu­ell kannst du eine SVG-Datei ent­spre­chend kom­pri­mie­ren und mit der Endung „.svgz“ ver­se­hen. Der Browser ent­packt die Datei auto­ma­tisch.

Fazit

Es gibt vie­le Möglichkeiten, mit denen du dei­ne SVG-Dateien opti­mie­ren kannst. Nicht immer lohnt sich der Aufwand. Aber je nach Komplexität einer Grafik und der Anzahl der ver­wen­de­ten SVG-Dateien kann eine gute Optimierung durch­aus zu bemer­kens­wer­ten Ergebnissen füh­ren.

Übrigens: zum Themenkomplex “SVG und respon­si­ves Webdesign” haben wir hier bei Dr. Web eben­falls einen Beitrag.

(dpe)

Denis Potschien

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.

3 Kommentare

  1. Wer kein Illustrator hat oder sich den Aufwand spa­ren will, der kann auf die­ses Optimierungswerkzeug zurück­grei­fen.

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.