SVG Export aus Illustrator

Im heutigen Web spielen SVGs eine zentrale Rolle. Sie haben nicht nur Iconfonts verdrängt, sondern bieten auch die Möglichkeit der Manipulation via CSS oder JavaScript. Will man eine Vektorgrafik für das Web aus Adobe Illustrator als SVG abspeichern, sind einige Einstellungen zu treffen, um Fallstricke zu vermeiden und Ladezeiten zu reduzieren, die ich im nachfolgenden Artikel vorstelle.


Die allgemeine Exportfunktion findet man unter "Datei > Exportieren > Exportieren als...". Schließlich wählt man bei Dateityp "SVG (*.SVG)" aus. Will man transparente Bereiche nicht beschneiden und die Zeichenfläche berücksichtigen, setzt man einen Haken bei "Zeichenflächen verwenden", ansonsten nicht. Im nachfolgenden Dialog wählt man folgende Optionen aus:

Ist man mit dem Detailgrad der Pfade im Ergebnis nicht zufrieden, erhöht man sukzessive die Dezimalstellen auf 3 oder 4.

Interessant wird es, wenn man in der Vektordatei Schnittmasken eingebettet hat. Man kann diese ebenfalls eliminieren (das führt zu erneut geringeren Dateigrößen sowie zu erhöhter Kompatibilität bei der Verwendung von Druck-Tools wie dompdf).

Hier gibt es im Illustrator zwei bekannte Wege: Zunächst markiert man alle Objekte mit STRG+A und wählt "Objekt > Transparenz reduzieren..." aus. Anschließend entfernt man über "Objekt > Schnittmaske > Zurückwandeln" die bestehenden Schnittmasken. Wenn das nicht klappt, macht man statt der beiden letzten Schritte folgendes: Zunächst wählt man "Objekt > Umwandeln... > OK" aus und anschließend im Pathfinder-Dialog die Option "Überlappungsbereich entfernen":

Das finale SVG kann man dann nochmals mit Tools wie svgo (auf der Kommandozeile oder im Web-GUI) weiter optimieren.

Zurück