SVG-Grafiken erstellen, exportieren und einbinden

SVG

Mit dem Format SVG (Scalable Vector Graphics) können Vektor-Grafiken im Browser dargestellt werden. Wie bei Vektor-Grafiken üblich, werden Farbwerte und Formen nicht über Pixel definiert, sondern mathematisch beschrieben. SVG-Grafiken haben dadurch eine sehr geringe Dateigröße, lassen sich verlustfrei und ohne Zuwachs der Dateigröße skalieren und mit CSS oder JavaScript animieren oder verändern.

In diesem Artikel fassen wir zusammen, was ihr beim Erstellen von SVGs beachten solltet.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Frühbucher-Preise sichern

SVG-Grafiken erstellen

Da das SVG-Format ein Vektor-Format ist, verwenden wir i.d.R. Adobe Illustrator zum Erstellen von SVG-Grafiken. Mit SVG können viele Effekte umgesetzt werden die mit Illustrator möglich sind, jedoch nicht alle. Bei komplexen Verläufen und Filtern solltet ihr mit abweichender SVG-Darstellung im Browser rechnen. Wichtig ist auch, dass ihr die Pfade sauber zeichnet. Selbst minimale Überlappungen können im Browser später zu sichtbaren Farbsäumen führen. Dieses Verhalten ist insbesondere bei skalierten Grafiken zu beobachten.

In Illustrator gezeichnete Vektor-Grafik mit übergroßer Zeichenfläche
In Illustrator gezeichnete Vektor-Grafik mit übergroßer Zeichenfläche

Das Pixelraster beachten

Auch wenn es sich bei SVGs um Vektorgrafiken handelt, solltet ihr das Pixelraster beachten. Wenn horizontale oder vertikale Linien auf halben Pixeln gezeichnet werden, führt das schnell zu unscharfen Kanten, da der Browser semitransparente Pixel erzeugt um die halben Pixel zu simulieren. Dieses Verhalten könnt ihr euch in Illustrator simulieren lassen, indem ihr die Pixelvorschau über »Ansicht > Pixelvorschau« einblendet.

Die Kanten des Hamburger-Icons wurden in der rechten Abbildung am Raster ausgerichtet
Die Kanten des Hamburger-Icons wurden in der rechten Abbildung am Raster ausgerichtet

Pixelgenaue Grafiken zeichnen

Seit Adobe Illustrator CC 2016 gibt es die Optionen zum Ausrichten an Pixeln. Das Bedienfeld findet ihr standardmäßig oben rechts in der Steuerungsleiste.

an-pixelraster-ausrichten-80
Ausrichtungsoptionen in der Steuerungsleiste von Illustrator

Hier könnt ihr einstellen, dass Pfade direkt beim Zeichnen, Verschieben und/oder Skalieren an den nächstgelegenen Pixeln ausgerichtet werden.

Zeichnet die SVG-Grafik in Illustrator am besten in der Größe, in der sie später auch auf der Website erscheint. Die Abmessung der Grafik hat zwar keine Auswirkung auf die Dateigröße, diese Vorgehensweise führt aber häufig zu besseren Ergebnissen im Browser. Auch wenn moderne Browser Grafiken gut skalieren können, gibt es immer noch ältere Browser die unscharfe Kanten etc. produzieren.

an pixeln ausrichten menu-80
Neues Menü in Illustrator CC für pixelgenaues Ausrichten

Vektor-Objekte korrigieren

Zum nachträglichen Korrigieren einer Zeichnung mit unscharfen Kanten markiert ihr das entsprechende Objekt und wählt »Objekt > Pixelgenaue Darstellung anwenden«. Sollten dabei unerwünschte Verschiebungen entstehen, könnt ihr die entsprechenden Pfade auch mit dem Direktauswahl-Werkzeug auf ganze Pixel verschieben. Damit die Pfade automatisch auf ganzen Pixeln einrasten setzt ihr einen Haken bei »Ansicht > An Pixeln ausrichten«.

auf-pixel-korrigiert
Auf halben Pixeln endende Objekte (links) sollten korrigiert werden (rechts)

Zeichenflächen richtig einstellen

Es ist nicht nur wichtig, dass die Vektor-Form sauber angelegt wurde, auch die Zeichenflächen (engl. Artboards) sollten angepasst werden.
Über »Objekt > Zeichenflächen > An ausgewähltes Objekt anpassen« verkleinert ihr die Zeichenfläche auf die Größe des markierten Objekts. Das ist u.a. wichtig, da Illustrator ansonsten einen Freiraum um die Grafik herum mit in die Datei speichert. Insbesondere im Responsive Design ist das häufig unerwünscht. Beachtet, dass eure Vektor-Form vor dem Anpassen der Zeichenfläche am Pixelraster ausgerichtet ist. Sonst kann es beim Export passieren, dass ihr ungewollt Teile eurer Zeichnung abschneidet.

Vektor-Grafik mit exakter Zeichenfläche
Vektor-Grafik mit exakter Zeichenfläche

Darüber hinaus solltet ihr darauf achten, nicht versehentlich mehrere Zeichenflächen mit in die SVG zu speichern. Auch wenn nach dem Export nur die gewünschte Zeichenfläche sichtbar ist, kann es durchaus passieren, dass weitere Zeichenflächen existieren. Das merkt ihr u.a. an der üppigen Dateigröße, oder ihr seht die Zeichenflächen wenn ihr die SVG-Datei nach dem Export noch einmal in Illustrator öffnet.

Ankerpunkte reduzieren

Achtet ebenfalls darauf, überflüssige Ankerpunkte zu vermeiden oder die Anzahl der Knoten nachträglich zu reduzieren. Viele Ankerpunkte erhöhen die Komplexität und somit die Dateigröße der SVG. Innerhalb von Illustrator habt ihr in diesem Zusammenhang u.a. die Möglichkeit Pfade zu vereinfachen (Objekt > Pfad > Vereinfachen). Auf das Zeichnen in Illustrator gehe ich hier nicht detailliert ein, dazu haben die Kollegen schon einiges an Fachliteratur veröffentlicht.

Der Vereinfachen-Dialog von Illustrator
Der Vereinfachen-Dialog von Illustrator

SVG-Dateien exportieren

Es gibt in Illustrator verschiedene Herangehensweisen um SVG-Grafiken zu exportieren. Wir beschreiben in diesem Artikel die empfehlenswerten Wege, die zu den besten Ergebnissen führen. Die verschiedenen Optionen, die es beim SVG-Export zu beachten gibt, beschreiben wir anschließend.

SVG-Export über den Dialog »Für Bildschirme exportieren«

Wählt  »Datei > Exportieren > Für Bildschirme exportieren«. Es öffnet sich das entsprechende Bedienfeld. Hier habt ihr zwei Möglichkeiten: Entweder ihr exportiert Zeichenflächen oder Elemente.

fuer-bildschirme-exportieren-80
Illustrator CC 2017 Für Bildschirme exportieren

Exportieren von Zeichenflächen

Wenn ihr eine Zeichenfläche inkl. aller Elemente exportieren wollt, entscheidet euch für diese Option. Wählt anschließend die entsprechenden Zeichenflächen aus, die ihr exportieren möchtet. Je ausgewählter Zeichenfläche wird eine SVG-Datei erstellt. Der Name der Zeichenfläche entspricht dem Namen der exportierten SVG-Datei. Dann legt ihr einen Speicherort fest, wählt SVG als Format aus und geht auf »Zeichenfläche exportieren«.

Die exportierte Datei entspricht den Abmaßen der Zeichenfläche inklusive des angelegten Weißraums.

Exportieren von Elementen

Entscheidet euch für diese Option, wenn ihr Elemente oder Gruppen von Elementen – unabhängig von den Abmaßen und der Positionierung auf ihrer Zeichenfläche – exportieren möchtet. Anstatt eine Zeichenfläche auszuwählen Zieht ihr die gewünschten Elemente via drag-and-drop in das Dialogfeld. Hier entspricht der Name eines Elements dem späteren Namen der exportierten SVG-Datei – je Element wird eine SVG-Datei erstellt.

Copy-and-Paste

Die wohl simpelste Möglichkeit, die Illustrator bietet, um SVG-Code zu erzeugen ist, die entsprechenden Pfade zu markieren und über »Bearbeiten > Kopieren« (Cmd + C/Strg + C) in die Zwischenablage zu kopieren. Von hier aus könnt ihr den SVG-Code direkt in einen Texteditor einfügen und als HTML- oder SVG-Datei abspeichern.
Allerdings gibt es hierfür keine Einstellungen und der Code kann noch stark optimiert werden.

Beachtet das diese Funktion in den Voreinstellungen unter »Dateien verarbeiten und Zwischenablage« aktiviert sein muss. Das ist sie im Normalfall aber standardmäßig.

SVG Export-Einstellungen von Illustrator

Beim SVG-Export stehen euch verschiedene Optionen zur Verfügung. Ihr erreicht die Optionen innerhalb des Dialogfensters »Für Bildschirme exportieren« über das kleine Zahnrad neben »iOS und Android«. Es erscheint folgender Dialog:

svg-sxport
SVG-Optionen zum exportieren von SVGs in Illustrator

Stil

Hiermit ist gemeint, in welchem Stil das CSS in der SVG-Datei untergebracht werden soll. Welche ihr wählt, ist abhängig von euren Anforderungen. Z.B ob die Dateigröße möglichst gering sein muss oder eure Zeichnung animiert werden soll, etc. Es gibt drei Möglichkeiten.

Interne CSS

Illustrator lagert die Stile in einen <style>-Abschnitt aus.

<style type="text/css"> .st0{fill:#FF0000;stroke:#000000;stroke-width:5;stroke-miterlimit:10;} </style> <circle class="st0" cx="412.1" cy="411.7" r="157.2"/>

Inline-Format

Illustrator schreibt Inline-CSS zur Definition von Gestaltungsmerkmalen.

<circle style="fill:#FF0000;stroke:#000000;stroke-width:5;stroke-miterlimit:10;" cx="412.1" cy="411.7" r="157.2"/>

Präsentationsattribute

Illustrator erstellt SVG-Attribute zur Definition von Gestaltungsmerkmalen.

<circle fill="#FF0000" stroke="#000000" stroke-width="5" stroke-miterlimit="10" cx="412.1" cy="411.7" r="157.2"/>

Schrift

Texte sollten als »SVG« exportiert werden, wenn sie später verändert werden sollen. Achtet darauf, dass bei der Verwendung von nicht websicheren Schriften auch der Webfont geladen werden muss.

Durch die Option »In Konturen umwandeln« werden Schriften in Pfade umgerechnet. Diese Option solltet ihr immer wählen, wenn Texte nicht mehr nachträglich editiert werden müssen. Die Dateigröße wird i.d.R. deutlich geringer als bei editierbaren Schriften.

Bilder

Es ist auch möglich Pixelgrafiken (Bitmap-Grafiken) innerhalb von SVG-Dateien zu verwenden. Dabei habt ihr die Wahl ob die Pixelgrafik »verknüpft« oder »eingebettet« werden soll.

Verknüpfte Pixelgrafik in Illustrator
Verknüpfte Pixelgrafik in Illustrator

Beibehalten

Bilder werden je nach ihrem Status in eurer Illustrator-Datei auch in die SVG-Datei mit übernommen. Liegen Bilder als Verknüpfung vor, werden sie verknüpft. Sind Bilder eingebettet, werden sie auch als Base64 in die SVG-Datei eingebettet.

Einbetten

Eingebettete Grafiken werden Bestandteil des Dokuments und Illustrator codiert eingebettete Pixelgrafiken beim Export als Base64.

<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 126 126" style="enable-background:new 0 0 126 126;" xml:space="preserve">
<image style="overflow:visible;" width="126" height="126" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMsaHR0cDov
L25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVna

[…]

6qPabtZAYjOmn/e42CGf/mVdBNtA0DQNA0DQNA0DQNA0DQNA0DQNA0DQNA0DQNB//9k=">
</image>
</svg>

Verknüpfen

Verknüpfte Pixelgrafiken werden als separate Datei gespeichert und können später auch außerhalb von Illustrator bearbeitet werden. Die SVG-Datei enthält dabei lediglich den Verweis auf die externe Datei. Insbesondere was die Kompression und die nachträgliche Bearbeitung angeht, empfiehlt es sich die Pixelgrafik außerhalb von Illustrator zu optimieren. Achtet bei verknüpften Grafiken auf den Pfad innerhalb der SVG. Der Pfad kann nachträglich mit einem Code-Editor angepasst werden.

<?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 126 126" style="enable-background:new 0 0 126 126;" xml:space="preserve">
<image style="overflow:visible;" width="126" height="126" xlink:href="../kulturbanause-logo.jpg" >
</image>
</svg>

Objekt-IDs

Die einzelnen Objekte eurer SVG bekommen IDs und Klassen, über die sie angesprochen werden können.

Ebenennamen

IDs und Klassen entsprechen den Namen der Ebenen in Illustrator. Ihr könnt also die Objekte vor dem export selbst benennen.

Minimal

IDs und Klassen werden automatisch und so kurz wie möglich generiert. Illustrator beginnt bei »a« und zählt hoch. Dies ist die beste Option, um die Dateigröße möglichst gering zu halten.

Eindeutig

Illustrator generiert automatisch 36-stellige Zeichenketten, damit die Elemente eindeutig identifizierbar sind.

Dezimalstellen

Die Anzahl der Dezimalstellen hat Auswirkung auf die Genauigkeit der Vektoren. Die Funktion ist also vom Effekt vergleichbar mit dem »Vereinfachen«-Dialog. Ich empfehle die Dezimalstellen auf 1 herabzusetzen. Wenn das Ergebnis sichtbare Defizite aufweisen sollte, erhöht die Anzahl der Dezimalstellen langsam. Auch diese Einstellung hat Auswirkung auf die Dateigröße.

Defekte Grafik aufgrund zu weniger Dezimalstellen. Oben das Ergebnis mit einer Nachkommastelle, in der Mitte das optimale Ergebnis mit zwei Nachkommastellen. Unten sind die Unterschiede rot eingefärbt.
Defekte Grafik aufgrund zu weniger Dezimalstellen. Oben das Ergebnis mit einer Nachkommastelle, in der Mitte das optimale Ergebnis mit zwei Nachkommastellen. Unten sind die Unterschiede rot eingefärbt.

Minifizieren

Setzt ihr einen Haken bei der Option »Minifizieren« entfernt Illustrator unnötige Gruppen und Leerzeichen. Wählt diese Option, um die Datei möglichst klein zu halten.

Responsive (Interaktives) SVG in Illustrator CC (ab 17.1)

In Illustrator CC steht ab Version 17.1 eine SVG-Funktion namens »interaktiv« zur Verfügung. Die englische Original-Formulierung lautet »responsive SVG« und beschreibt besser was hier passiert.
Wenn ihr den Haken aktiviert, entfernt Illustrator die Höhen- und Breitenangaben aus dem SVG-Code bzw. aus der exportierten Grafik. Dadurch passt sich die SVG-Grafik automatisch dem zur Verfügung stehenden Platzbedarf an.

Demo anzeigen

Bis zu Illustrator 17.1 wurde die SVG-Grafik immer in der Größe exportiert, in der sie auch gezeichnet wurde. Wenn ihr eine ältere Illustrator-Version verwendet, könnt ihr die SVG-Datei nach dem Export auch in einem Texteditor öffnen und dort die Attribute height und width aus dem Code entfernen. Das führt zum identischen Ergebnis. Für die Code-Ausgabe gilt natürlich das Gleiche.

Im direkten Vergleich: Normale SVG-Grafik in Originalgröße (links) und interaktives SVG (rechts)
Im direkten Vergleich: Normale SVG-Grafik in Originalgröße (links) und interaktives SVG (rechts)

SVG-Grafiken mit Photoshop erstellen und exportieren

Photoshop ist eigentlich ein pixelbasiertes Bildbearbeitungsprogramm und daher nicht die ideale Grundlage für ein Vektor-Format wie SVG. Dennoch kamen in den neueren PS-Versionen einige Vektor-Funktionen und der sog. Generator hinzu mit dessen Hilfe es möglich ist echte Vektoren zu zeichnen und als SVG zu exportieren. Wir haben den SVG-Export von Photoshop in einem eigenen Artikel detailliert beschrieben.

SVG-Grafiken in die Website einbinden

Es gibt zahlreiche Möglichkeiten wie SVG-Grafiken oder SVG-Code in eine Website integriert werden kann. Die verschiedenen Möglichkeiten haben wir mit ihren jeweiligen Vor- und Nachteilen detailliert in folgendem Beitrag beschrieben: SVG-Grafiken in Websites/HTML-Seiten einbinden

SVG-Bibliotheken und Frameworks

Wie eingangs erwähnt, können SVG-Grafiken recht unkompliziert animiert und interaktiv eingesetzt werden. Dazu existieren diverse Frameworks und JavaScript-Bibliotheken die vorgefertigte Animationen beinhalten oder SVG-Grafiken live rendern. Eine stets aktuelle Liste aller mir bekannten Tools zu diesem Thema findet ihr hier: Tools zum Thema SVG – Best Web Design Tools

Links & Quellen