kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

SVG-Grafiken mit Photoshop speichern/exportieren

SVG mit Photoshop

Photoshop ist als pixelbasiertes Bildbearbeitungsprogramm nicht die ideale Grundlage für ein Vektor-Format wie SVG. In den neueren Photoshop-Versionen kamen allerdings einige Funktionen hinzu, mit denen es möglich ist in Photoshop »echte« Vektoren zu zeichnen. Und mit Hilfe des Photoshop-Generators oder des »Schnell Exports« ist es möglich Vektor-Formen als SVG-Grafik zu exportieren. Was es dabei zu beachten gibt, haben wir in diesem Beitrag zusammengefasst. 

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

Qualitätsunterschiede zwischen dem SVG-Export von Photoshop und dem von Illustrator

Wie eingangs bereits erwähnt ist Photoshop nicht für das Erstellen von Vektor-Grafiken erfunden worden. Zwar ist es mittlerweile möglich Vektoren zu zeichnen und als SVG zu exportieren, der Qualitätsunterschied zu einer SVG aus Illustrator oder Sketch ist allerdings groß. Folgende Defizite sollten bekannt sein:

  • Es ist in Photoshop nicht möglich die Anzahl der Dezimalstellen bei Export festzulegen. Die SVG-Dateien werden folglich recht groß.
  • Wenn eine Form in Photoshop aus mehreren Teilen besteht, erzeugt Photoshop dennoch einen einzigen SVG-Pfad. Es ist also nicht möglich Teilstücke zu animieren.
  • Die SVGs sind in Photoshop nicht komprimiert
  • Die SVGs sind in Photoshop nicht flexibel in Höhe und Breite. Dies kann allerdings problemlos nachgeholt werden, indem man die SVG nach dem Export im Code-Editor öffnet und die Attribute height und width entfernt.

Wenn die o.g. Punkte für euch ein entscheidendes Kriterium darstellen sollten, verwendet besser Illustrator für die Erstellung und den Export von SVGs. Einen detaillierten Artikel dazu haben wir hier veröffentlicht.

SVG-Export mit der Photoshop-Funktion »Schnell Export«

Photoshop wurde in Version CC 2015 um die Schnell-Export-Funktion erweitert. Mit Hilfe des »Schnell Exports« kann eine Ebene oder Gruppe per Rechtsklick mit favorisierten Einstellungen exportiert werden. Auch SVG kann als Export-Format angegeben werden. Folgende Schritte sind notwendig:

1. Voreinstellungen einrichten

Stellt unter »Voreinstellungen → Exportieren« das Format »SVG« ein.

Voreinstellungen für den Schnell Export in Photoshop
Die Voreinstellungen für den »Schnell Export« in Photoshop

2. Export durchführen

Um nun eine Ebene oder Gruppe als SVG zu exportieren, macht im Ebenen-Bedienfeld einen Rechtsklick auf das gewünschte Element und wählt anschließend »Schnell Export als SVG«. Im folgenden Dialog werdet ihr gefragt wo die SVG-Grafik gespeichert werden soll.

SVG-Export mit der Photoshop-Funktion »Exportieren als …«

Alternativ zum Schnell Export könnt ihr auch den »Exportieren als …«-Dialog benutzen. Hierbei handelt es sich um den Nachfolger des »Für Web speichern«-Dialogs. Ihr erreicht den Export-Dialog unter »Datei → Exportieren → Exportieren als …« oder über das Kontextmenü, wenn ihr im Ebenenbedienfeld einen Rechtsklickt macht.

Der »Exportieren als…«-Dialog von Photoshop
Der »Exportieren als…«-Dialog von Photoshop

Innerhalb des Dialogs könnt ihr für jede Ebene des Dokuments die gewünschten Voreinstellungen treffen. Stellt bei den gewünschten Ebenen einfach oben rechts als Export-Format »SVG« ein und klickt auf »Exportieren«. Im nächsten Schritt werdet ihr gefragt wo die Datei gespeichert werden soll.

SVG-Export mit der Funktion »Bild-Assets« (Photoshop Generator)

In Version 14.2 wurde Photoshop um die Funktion »Bild-Assets« erweitert. Mit Hilfe dieser Funktion ist es möglich Live-Daten aus Photoshop zu exportieren, ohne manuell speichern zu müssen. Photoshop erkennt hierbei die gewünschten Export-Einstellungen anhand festgelegter Bezeichnungen im Ebenen-Bedienfeld.

1. Bild-Assets aktivieren

Im ersten Schritt müssen die Bild-Assets aktiviert werden. Unter »Datei → Generieren → Bild-Assets« kann die Funktion eingeschaltet werden. Ein Häkchen hinter dem Menüeintrag zeigt an, dass die Funktion eingeschaltet ist.

Aktivierte Bild-Assets in Photoshop

2. Ebenen korrekt benennen

Damit Photoshop die Ebenen oder Gruppen als SVG exportiert, muss der Ebenen- oder Gruppenname um die Dateiendung .svg erweitert werden. Für andere Export-Formate existieren zahlreiche Schreibweisen, die wie hier detailliert erklärt haben.

Ebenenbezeichnung beim SVG-Export mittels Photoshop »Bild Assets«

3. Speicherort festlegen

Sobald die Ebene korrekt benannt wurde, exportiert Photoshop die Daten. Die SVG-Datei wird dabei in einem Ordner namens »Unbenannt-1-Assets« abgelegt, wobei »Unbenannt-1« immer dem Namen des Photoshop-Dokuments entspricht. Der Assets-Order wird immer direkt neben der PSD erzeugt. Bei einem ungespeicherten Dokument geschieht das aus dem Desktop.

SVG-Export mittels »Bild Assets« in Photoshop CC 14.2 – CC 2014.2

In älteren Photoshop-Versionen muss der SVG-Export manuell aktiviert werden. Diese Anpassung betrifft alle Photoshop-Versionen die bereits über die Funktion »Bild-Assets« verfügen, aber kleiner sind als CC 2014.2.

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.