Im Gegensatz zu pixelbasierten Bildern sind SVGs verlustfrei skalierbar. Ein weiterer Vorteil ist, dass beim Öffnen der Grafik im Texteditor die jeweiligen Formen in der Grafik sichtbar sind und daher schnell und direkt verändert werden können. Nicht nur mit Adobe Illustrator können SVGs exportiert werden, es gibt noch einige andere Tools mit jenen das ebenfalls möglich ist, wie zum Beispiel Inkscape oder Tools im Internet wie Sketch oder iDraw (beide für OS X oder iOS).

SVG-Export mit Adobe Illustrator

In einfachen SVG Grafiken wie dieses Beispiel hier gibt es drei Grundformen: Quadrat, Dreieck und Kreis.

Jedoch ist der Export aus Adobe Illustrator gar nicht so leicht, da es sechs unterschiedliche Möglichkeiten gibt um SVGs abzuspeichern. Folgende Profile werden im Adobe Illustrator angeboten:

• SVG 1.0 und SVG 1.1: für SVG-Dateien, die auf einem Desktop-Computer angezeigt werden.
• SVG Basic 1.1: für Geräte mit mittlerer Leistung
• SVG Tiny 1.1 und SVG Tiny 1.1+: für kleine Geräte wie Mobiltelefone, Wichtig: SVG Tiny und SVG Tiny Plus wird nicht von allen Mobiltelefonen unterstützt.
• SVG Tiny 1.2: für SVG-Dateien, die auf einer Reihe von unterschiedlichen Geräten angezeigt werden sollen, von PDAs und Mobiltelefonen bis hin zu Laptops und Desktopcomputern.

Diese verschiedenen Profile sind eigentlich ein Widerspruch in sich selbst, da es bei Vektorgrafiken darum geht dass sie verlustfrei skaliert werden können und deshalb auf allen Geräten sauber angezeigt werden sollen. Wichtig ist hier, dass nicht alle Formate alle Eigenschaften von SVGs unterstützen. Im Allgemeinen ist es am besten mit der Vollversion SVG 1.1 zu arbeiten.

Ein Beispiel für einen SVG-Export ist folgendes:

<?xml version=“1.0“ encoding=“utf-8“?>
<!—Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.1//EN“ „http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg version=“1.1“ id=“Ebene_1“ xmlns=“http://www.w3.org/2000/svg“ xmlns:xlink=“http://www.w3.org/1999/xlink“ x=“0px“ y=“0px“ viewBox=“0 0 300 100“ enable-background=“new 0 0 300 100“ xml:space=“preserve“>
<rect fill=“#21B4AE“ width=“100“ height=“100“/>
<polygon fill=“EDBA4B“ points=“100,0 200,50 100,100“/>
<circle fill=“#E3493A“ cx=“250“ cy=“50“ r=“50“/>
</svg>

Die ersten drei Zeilen in dem Beispiel sind für die Darstellung nicht relevant. Wichtig sind nur die Daten im svg-Element, jedoch sind auch einige Attribute im svg-Element nicht notwendig für die Anzeige. Daher kann das exportierte File noch gekürzt werden:

<svg version=“1.1“ id=“Ebene_1“ xmlns=“http://www.w3.org/2000/svg“ xmlns:xlink=“http://www.w3.org/1999/xlink“ x=“0px“ y=“0px“ viewBox=“0 0 300 100“>
<rect fill=“#21B4AE“ width=“100“ height=“100“/>
<polygon fill=“EDBA4B“ points=“100,0 200,50 100,100“/>
<circle fill=“#E3493A“ cx=“250“ cy=“50“ r=“50“/>
</svg>

Wird dieser Code im HTML-Dokument eingesetzt wird er von den Browsern unterschiedlich interpretiert. Obwohl die Viewbox die gewünschten Maße enthält skalieren Chrome, Firefox, Opera und Safari das SVG auf die gesamte Breite des Viewports. Der Internetexplorer (ab IE9) stellt es in den gewünschten Maßen 300×100 Pixeln dar. Fügt man das Bild mittels eines img-Elements mit der gewünschten Höhe und Breite ein ergibt sich ein anderes Problem und das Bild wird im Safari unter Windows verzerrt angezeigt.

<img src=“illustrator-svg.svg“ width=“300“ height=“100“>

Das eigentliche Problem ist, dass Illustrator kein width- und height-Attribut mit exportiert. Damit werden Darstellungsfehler vermieden. Man kann sie entweder im Nachhinein im Code hinzufügen oder im Illustrator beim Speichern unter „Mehr Optionen“ und den Haken bei „interaktiv“ herausnehmen. Nun wird die Grafik in allen Browsern mit der richtigen Höhe und Breite angezeigt.

<svg version=“1.1“ id=“Ebene_1“ xmlns=“http://www.w3.org/2000/svg“ xmlns:xlink=“http://www.w3.org/1999/xlink“ x=“0px“ y=“0px“ viewBox=“0 0 300 100“ width=“300px“ height=“100px“>

SVG-Export mit Inkscape

In Inkscape gibt es zwei Möglichkeiten ein SVG zu exportieren: Inkscape-SVG oder normales SVG. Während das aus Illustrator erzeugte File 611 Bytes, gekürzt und korrigiert 250 Bytes benötigt, kommt das Inkscape-SVG auf stolze 2,8Kilobyte, da viele unnötige Metadaten enthalten sind.

<sodipodi:namedview id=“base“ pagecolor=“#ffffff“ bordercolor=“#666666“ borderopacity=“1.0“ inkscape:pageopacity=“0.0“ inkscape:pageshadow=“2“ inkscape:zoom=“2.5527972“ inkscape:cx=“89.269963“ inkscape:cy=“47.142857“ inkscape:document-units=“px“ inkscape:current-layer=“layer1“ showgrid=“false“ inkscaape:window-width=“1507“ inkscape:window-height=“842“ inkscape:window-x=“2095“ inkscape: window-y=“91“ inkscape:window-maximized=“0“ />
	<metadata id = „metadata7“>
		<rdf:RDF>
			<cc:Work rdf:about=““>
				<dc:format> image/svg+xml</dc:format>
				<dc:type rdf:resource=“http://purl.org/dc/dcmitype/StillImage“ />
				<dc:title></dc:title>
			</cc:Work>
		</rdf:RDF>
	</metadata>

Beim Export als normales SVG fallen einiger dieser Metadaten weg und der benötigte Speicherplatz beträgt nur noch 1,49 Kilobyte. Jedoch gibt es hier den großen Nachteil, dass die Grafik nicht durch Grundformen sondern durch ein path-Element beschrieben wird. Dadurch können die unterschiedlichen Formen nachträglich nur noch schwer unterschieden werden (gerade noch durch die Farbe) und das nachträgliche Editieren der Formen ist um einiges schwerer. Folglich ist der benötigte Speicherplatz bei komplizierten Formen sehr groß, da sich diese ineffiziente Schreibweise summiert.

<path d=“m -68.12602, 73.684960,-48.113123 -10e-7,-48.11312 L -26.458834,1.5152781 15.208351,25.571838 -26.458836,49.6284 z“ transform=“matrix(1.199985,0,0,1.0392175,181.75021, 975.78748)“ id=“path3755“ style=“fill:#e3493a; fill-opacity:1;stroke:none“ />

Fazit dieses Vergleichs ist, dass es effizienter ist die benötigten SVGs im Adobe Illustrator zu speichern. Arbeitet man mit anderen Programmen sollte man unbedingt einen Blick in den erzeugten Code werfen.

Grafik komprimieren

Wenn man SVG-Grafiken nicht manuell durchgehen will kann man zur Komprimierung auch ein Tool nutzen. Dabei sollte man einen genauen Blick auf die Ergebnisse werfen, denn nicht jedes Tool liefert vernünftige Ergebnisse.

Schickt man ein SVG in Compressor.io wird aus dem originalen Illustrator-SVG-File mit 611 Bytes eine Datei mit 617 Bytes. Die ersten drei Zeilen bleiben enthalten und es wird sogar ein unnötiges Attribut hinzugefügt. Das Inkscape-SVG wird von 2,8 auf 1,04 Kilobyte reduziert. Aber auch hier werden nicht alle unnötigen Metadaten entfernt.

Der SVG Optimiser von Peter Collingridge liefert da schon bessere Ergebnisse. Er entfernt die ersten drei Zeilen aus dem Illustrator-File und schreibt den Code in eine Zeile. Somit verbleiben nur noch 432 Bytes (vorher 611 Bytes). Jedoch werden nicht alle überflüssigen Metadaten aus dem Inkscape-SVG entfernt. Dadurch ist das Ergebnis mit 1,25 Kilobyte etwas größer als bei Compressor.io.

In Bezug auf die Dateigröße arbeitet SVGO am effektivsten. Die Illustrator-Datei wird auf 245 Bytes reduziert und die Inkscape-Datei auf 366 Bytes. Aber alle Grundformen werden hier in ein path-Element umgewandelt, wodurch ein paar Zeichen eingespart werden. Dieser Schritt lohnt sich also erst ganz am Schluss wenn keine Änderungen mehr durchgeführt werden.

SVGs planen

Will man SVGs später effizient verwenden kann das Planen einer Grafik sehr sinnvoll sein. Beispielsweise können die vier Ringe in der Grafik darunter mit vier separaten Kreisen beschreiben werden oder aus zwei Kreisen mit Umrandung/Stroke erstellt werden. Außerdem müssen die Kreise nicht fünf Mal neu erstellt werden, sondern der Kreis kann einmal gruppiert und mit use wiederverwendet werden.

Die kleinste manuell geschriebene Version zu dieser Grafik kann also folgendermaßen aussehen:

<svg version=“1.1“ xmlns=“http://www.w3.org/2000/svg“ xmlns:xlink=“http://www.w3.org/1999/xlink“ x=“0px“ y=“0px“ viewBox=“0 0 500 200“ width=“500“ height=“200“>
<g id=“kreise“>
	<circle fill=“#E3493A“ cx=“50“ cy=“50“ r=“45“ stroke=“#EDBA4B“ stroke-width=“10“ />
	<circle fill=“#FFF“ cx=“50“ cy=“50“ r=“25“ stroke=“#21B4AE“ stroke-width=“10“ />
</g>
<use x=“100“ y=“100“ xlink:href=“#kreise“ />
<use x=“200“ y=“0“ xlink:href=“#kreise“ />
<use x=“300“ y=“100“ xlink:href=“#kreise“ />
<use x=“400“ y=“0“ xlink:href=“#kreise“ />
</svg>

Diese Datei benötigt 558 Bytes, im Gegensatz einer im Adobe Illustrator regulär erstellten Datei mit 3,6 Kilobytes. Das Gruppieren macht sich vor allem bei großen Infografiken bezahlt, in jenen zum Beispiel Hochhäuser oder Bäume einmal gruppiert und immer wiederverwendet werden.

Weiters ist auf nicht sichtbare Ebenen zu achten. Diese sind zwar im Moment ausgeblendet, aber werden trotzdem mit dem Attribut display=“none“ exportiert. Falls nicht verschiedene Ebenen innerhalb des SVGs ein- oder ausgeschaltet werden sollen, sollten nicht benötigte Ebenen entfernt werden.

Zusammenfassend lässt sich sagen, dass ein Blick in den Quellcode der SVG-Dateien bei einem Webprojekt, in dem viele SVG-Grafiken verwendet werden wichtig ist, um diese zu optimieren. Folglich wird die Größe der Files verringern und die Performance der Website verbessert.

Quellen:

Schwarz, N. (2014, November). SVG: Tücken im Detail. Screenguide, (24), 76–79.