SVG-Grafiken erstellen und einbinden

SVG

Mit dem Format SVG (Scalable Vector Graphics) können Vektor-Grafiken in 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 JavaScript animieren oder verändern.

In diesem Artikel fasse ich zusammen, was ihr beim Erstellen von SVGs in Illustrator oder Photoshop beachten solltet, wie SVGs in Websites eingebunden werden können und welche Tools und Hilfsmittel es in diesem Zusammenhang gibt.

Workshop: CSS – The Next Level

Wir machen dich fit für die Zukunft des Web! In diesem Workshop lernst du die spannendsten neuen CSS-Techniken anhand praktischer Übungen kennen.

Berlin, 11. November 2016

SVG-Grafiken mit Illustrator erstellen

Da das SVG-Format ein Vektor-Format ist, verwende ich i.d.R. Adobe Illustator 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 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

Vektor-Objekte zeichnen

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 auch immer noch ältere Browser die unscharfe Kanten etc. produzieren. Unscharfe Kanten entstehen vor allem dann, wenn eure Objekte in Illustrator Abmessungen besitzen, die keinen vollen Pixel entsprechen. Hier solltet ihr korrigierend eingreifen. Markiert dazu das Objekt und rundet in der Werkzeugleiste bzw. über »Fenster > Transformieren« die Breite und die Höhe auf volle Pixel.

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

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

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 ebenfalls schnell zu unscharfen Kanten, da der Browser semitransparente Pixel erzeugt um die halben Pixel zu simulieren.
Blendet zunächst das Pixelraster über »Ansicht > Pixelvorschau« ein. Anschließend müsst ihr alle horizontalen und vertikalen Kanten manuell am Raster ausrichten. Ihr könnt auch die Funktion »An Pixelraster ausrichten« verwenden, korrigiert hier aber in jedem Fall noch von Hand nach.

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.

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

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 unerwünscht.

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.

SVG-Dateien aus Illustrator exportieren

Wenn ihr eure Datei als SVG exportieren möchtet, wählt in Illustrator CC »Datei > speichern unter > SVG«. Nachdem ihr das Format und den gewünschten Dateinamen angegeben habt, erscheint ein Dialog mit diversen Optionen.

Empfohlene Export-Einstellungen für SVG im Web Design

Empfohlene Export-Einstellungen für SVG im Web Design

Die entscheidenden Einstellungen schauen wir uns gleich an, wichtig ist aber dass ihr SVGs auf zwei Arten exportieren könnt.

  • Als Datei (z.B. kulturbanause-logo.svg)
  • Als HTML-Code (<svg>)

Wenn ihr den Dialog mit »OK« bestätigt, erhaltet ihr die Datei. Den Code erhaltet ihr über einen Klick auf den Button »SVG-Code«. Alle Einstellungen innerhalb des Dialogs wirken sich unmittelbar auf beide Ausgabeformen aus.
Im Folgenden gehe ich auf die wichtigsten Einstellungen ein.

SVG-Profil

Als SVG-Profil solltet ihr SVG 1.1 verwenden. Bei SVG 1.1 handelt es sich um die offizielle Empfehlung des W3C.

Schriftarten

Texte sollten als »SVG« exportiert werden, wenn sie später verändert werden sollen. Als »Subsetting« wählt ihr »Nur verwendete Glyphen«. Bei individuellen Schriften werden so nur die tatsächlich benutzten Buchstaben exportiert, was die Dateigröße spürbar reduziert. 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.

Optionen

Das Beibehalten von Illustrator-Bearbeitungsfunktionen sollte grundsätzlich deaktiviert werden. Diese Einstellung ist im Web nicht sinnvoll und erhöht die Dateigröße enorm.

Pixelgrafiken innerhalb von SVG verwenden

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

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ü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>

CSS-Eigenschaften

Im Abschnitt »CSS-Eigenschaften« könnt ihr festlegen wo Illustrator die Gestaltung der Grafiken definiert. Am einfachsten verständlich sind die Optionen, wenn man den Code direkt vergleicht:

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"/>

Stilattribute

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"/>

Stilattribute Enitätsreferenzen

Illustrator lagert die Stile aus.


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

Stilelemente

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"/>

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.

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)

Optimierte Grafiken mit SVG Now exportieren

Für Illustrator existiert das Add-on »SVG Now«, das auf Basis von SVGO Optimierungen an der Datei vornimmt, und in vielen Fällen kleinere SVGs exportiert als Illustrator selbst. SVG Now befindet sich aktuell noch in der Beta-Phase und kann kostenlos über den Creative Cloud Add-on-Bereich installiert werden.

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. Der SVG-Export wird von Photoshop ab der Version 2014.2 nativ unterstützt. In älteren Versionen müsst ihr den SVG-Export manuell aktivieren.

SVG-Export mit dem Photoshop-Generator

Mit Hilfe des Photoshop-Generators könnt ihr ab Version Photoshop CC 2014.2 SVGs exportieren. Öffnet Photoshop, erstellt eine Datei mit Vektor- oder Textebene und wählt »Datei > Generieren > Bild-Assets«. Als Dateiendung wird im Ebenen-Bedienfeld *.svg verwendet um die Grafik als SVG in den Assets-Ordner zu exportieren. Sollte euch die Handhabung des Generator unbekannt sein, lest bitte folgenden Artikel: Echtzeit Dateiexport (Bild-Assets) mit Photoshop CC.

SVG-Export in Photoshop (von PS CC 14.2 bis PS CC 2014.2) manuell aktivieren

Zunächst müsst ihr Photoshop schließen. Anschließend erstellt ihr eine neue umformatierte Textdatei und fügt folgenden Code ein.


{
    "generator-assets":  {
        "svg-enabled": true
    }
}

Speichert die Datei unter dem Dateinamen »generator.json« ab und verschiebt sie in das Root-Verzeichnis eures Benutzeraccounts auf dem Computer. Unter Mac OSX lautet das Verzeichnis beispielsweise »Macintosh HD / Users / BENUTZERNAME / «. Wenn Ihr Photoshop neu startet, ist der SVG-Export über den Generator (wie oben beschrieben) aktiviert.

SVG-Grafiken in die Website einbinden

Ihr habt nun eine SVG-Grafik erstellt. Je nachdem für welche Art von SVG ihr euch entschieden habt (Code oder Datei), hat dies Auswirkungen auf die Browserkompatibilität und auf die Art der Einbindung. Im Folgenden beschreibe ich die gängigsten Möglichkeiten.

SVG über den Code (<svg>) einbinden

Wenn ihr den SVG-Code verwenden möchtet, steht euch nur eine Option zur Verfügung. Ihr fügt den <svg>-Tag in den HTML-Code eurer Seite ein. Achtet darauf, dass die Option »interaktiv« Auswirkung darauf hat, ob die Grafik flexibel ist oder nicht.

Demo anzeigen

SVG als Grafik (<img>/background) einbinden

Wenn ihr euch für den Dateiexport im Format *.svg entschieden habt, könnt ihr die Grafik innerhalb eines img-Tag im HTML-Code verwenden. Achtet darauf, dass die SVG nun über img im CSS-Code angesprochen wird und auch hierüber ggf. ihre Flexibilität erhält.


<img src="kulturbanause-logo.svg">

Grundsätzlich könnt ihr die SVG (wie jede andere Grafik auch) über die Eigenschaft background einem Element zuweisen. Damit die Grafik flexibel wird, müsst ihr jedoch zusätzlich die Eigenschaft background-size verwenden, sofern die SVG-Grafik nicht »interaktiv« exportiert wurde. Wenn euch die Funktionsweise von background-size nicht geläufig ist, lest bitte folgenden Artikel: Flexible CSS-Hintergründe mit »background-size« gestalten


.site-logo {
  height:200px;
  width:200px;
  background:url(kulturbanause-logo.svg) 50% 50% no-repeat;
}

Demo anzeigen

SVG als <object> einbinden

Auch der <object>-Tag kann verwendet werden um SVGs einzubetten. Ein Vorteil dieser Lösung ist die unkomplizierte Bereitstellung einer Fallback-Grafik.


<object type="image/svg+xml" data="kulturbanause-logo.svg">
  <!-- fallback -->
  <img src="kulturbanause-logo.png" alt="">
</object>

Demo anzeigen

Fallback-Lösungen für inkompatible Browser (<= IE8)

Mit Hilfe von Modernizr könnt ihr prüfen ob ein Browser SVG versteht und Alternativen anbieten wenn das nicht der Fall ist. Einen detaillierten Artikel zu diesem Thema habe ich bereits veröffentlicht: SVG mit PNG-Fallback

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