PSD zu SVG ohne Ebenenverlust: Was erhalten bleibt

Du kannst nicht jede Photoshop-Ebene in eine gleichwertige SVG-Ebene umwandeln. Ein PSD kann Formebenen, bearbeitbaren Text, Masken, Effekte, Smart Objects und gewöhnliche Pixel mischen. SVG kann Pfade, Text, Gruppen und Bilder darstellen, doch diese Objekte lassen sich nicht sauber auf Photoshops Dokumentmodell abbilden. Der sicherste Workflow erhält Vektorinhalt durch einen nativen Export und vektorisiert dann nur Rastergrafik, für die keine wiederverwendbare Vektorquelle vorhanden ist.

Die schnelle Entscheidung

• Wenn das PSD bereits saubere Formpfade enthält, erhalte diese Pfade oder übertrage sie in einen Vektoreditor.
• Behalte bearbeitbaren Text nur dann als Text, wenn das Ziel die Schrift hat und SVG-Text zuverlässig verarbeiten kann. Wandle sonst eine Ausgabekopie in Pfade um.
• Betrachte Masken, Effekte, Smart Objects und Pixelebenen als sichtbare Darstellung, nicht als transportierbare Ebenenstruktur.
• Wenn du nur die auf eine Ebene reduzierte Grafik als bearbeitbare Formen brauchst, prüfe das gespeicherte Gesamtbild und vektorisiere es.
• Öffne das endgültige SVG und prüfe seine Objekte. Die Endung .svg beweist nicht, dass Ebenen erhalten geblieben oder Pixel zu Pfaden geworden sind.

Eine PSD-Ebene ist keine SVG-Ebene

Photoshops Ebenenbedienfeld beschreibt, wie ein Dokument bearbeitet wird. SVG beschreibt, was ein Renderer zeichnet. Das sind unterschiedliche Aufgaben.

Adobes aktueller Image-Assets-Workflow kann SVG-Assets aus benannten Ebenen oder Ebenengruppen erzeugen. Dieselbe Dokumentation sagt, dass ein Ebenengruppen-Asset auf ein flaches Bild reduziert wird, selbst wenn die Gruppe Formen und bearbeitbaren Text enthält. Anders gesagt: SVG als Ausgabe zu wählen verwandelt die Photoshop-Hierarchie nicht in eine gleichwertige SVG-Hierarchie.

Bestandsaufnahme der Datei vor der Konvertierung

Dupliziere das PSD, bevor du etwas änderst. Prüfe dann die Bedienfelder für Ebenen, Pfade, Eigenschaften und Smart Objects.

1. Blende die Pixelebenen aus. Wenn brauchbare Grafik übrig bleibt, hast du vielleicht bereits Vektorformen, die sich zu erhalten lohnen.
2. Wähle jede Textebene aus. Notiere Schriftfamilie und -schnitt, bevor du den Text in Pfade umwandelst oder überträgst.
3. Öffne Smart Objects. Eine verknüpfte Illustrator-Datei oder eine andere Vektorquelle ist besser als das Vektorisieren ihrer gerenderten Vorschau.
4. Schalte Masken und Effekte ein und aus. Entscheide, ob der bearbeitbare Aufbau zählt oder nur die endgültige Darstellung.
5. Prüfe das gespeicherte Gesamtbild. Wenn die Datei auf einem anderen Rechner anders geöffnet wird, speichere eine geprüfte Kopie neu, bevor du einen Workflow mit auf eine Ebene reduziertem Bild nutzt.

Adobe dokumentiert außerdem den Export ausgewählter Ebenen als separate Dateien. Separate Exporte können brauchbare Grenzen zwischen Assets erhalten, erzeugen aber weiterhin kein einzelnes SVG, das sich wie der ursprüngliche PSD-Ebenenstapel verhält.

Wähle den Weg nach dem Objekttyp

Weg 1: Vektorinhalt erhalten

Nutze diesen Weg für Formebenen, Zeichenstiftpfade, einfachen bearbeitbaren Text und Smart Objects, deren ursprüngliche Vektorquelle noch vorhanden ist.

Übertrage oder exportiere jeweils ein logisch zusammengehöriges Asset und öffne es dann in Illustrator, Inkscape oder einem anderen SVG-Editor. Prüfe, ob das Ergebnis Pfade und Gruppen statt eines rechteckigen Bilds enthält. Wenn Text bearbeitbar bleiben muss, öffne das SVG auf einem anderen Rechner, der dein Photoshop-Dokument nicht hat, und bestätige, dass die gewünschte Schrift geladen wird. Behalte bei Logos und Fertigungsdateien einen Master mit bearbeitbarem Text und erstelle eine Ausgabekopie mit Schriftpfaden.

Reduziere eine gute Vektorquelle nicht auf ein flaches Bild, nur um sie durch einen Vektorisierer zu schicken. Vektorisierung zeichnet die gerenderte Darstellung neu und kann deshalb Knoten hinzufügen, Kurven verändern und Text in angenäherte Umrisse verwandeln. Native Geometrie ist die sauberere Grundlage.

Weg 2: Sichtbare Grafik auf ein Bild reduzieren, dann vektorisieren

Nutze Vektorisierung, wenn der brauchbare Entwurf nur als Pixel existiert oder die gespeicherte sichtbare Darstellung des PSD die beste verbliebene Quelle ist. Flächige Logos, Abzeichen, Icons, Schriftzüge und Illustrationen mit klaren Farbgrenzen eignen sich meist für diesen Weg. Fotos, subtile Verläufe, Pinseltextur und weiche Schatten meist nicht.

Vor der Vektorisierung:

1. Blende alles aus, was nicht im Vektor erscheinen soll.
2. Platziere die Grafik auf dem Hintergrund oder der Transparenz, die sie für die Übergabe braucht.
3. Prüfe kleine Buchstabeninnenräume, Löcher und feine Schriftzüge in der gewünschten Ausgabegröße.
4. Speichere eine Kompatibilitätskopie oder exportiere ein hochwertiges PNG, wenn das PSD keine zuverlässige zusammengeführte Ansicht hat.
5. Behalte das ursprüngliche PSD. Die Vektorisierung ist ein neues Ausgabeasset, kein Ersatz für das Dokument.

Ein SVG darf gemäß dem SVG-2-Modell für eingebettete Inhalte ein eingebettetes Rasterbild enthalten. Ein reiner Formatkonverter kann deshalb die zusammengeführten PSD-Pixel in einem SVG platzieren, ohne sie zu vektorisieren. Durch Zoomen und Prüfen des Objekttyps erkennst du dieses Ergebnis mit scheinbaren Vektoren.

So sieht das mit PerfectVector aus

PerfectVector öffnet ein unterstütztes PSD oder PSB über sein gespeichertes zusammengeführtes Kompatibilitätsbild. Der Browser bereitet dieses sichtbare Bild lokal vor und bittet dich vor der Vektorisierung um Prüfung. Er lädt das ursprüngliche Photoshop-Dokument nicht hoch und behauptet nicht, Ebenen, Masken, bearbeitbare Schrift, Effekte, Pfade, Zeichenflächen oder Smart Objects zu rekonstruieren. Der Photoshop-zu-SVG-Workflow baut die vorbereiteten Pixel als SVG-Pfade neu auf.

Damit ist es der Vektorisierungsweg, nicht der Weg zum Erhalt von Ebenen. Nutze ihn, wenn das gespeicherte Gesamtbild die richtige Darstellung ist und bearbeitbare Pfadgeometrie hilfreicher als der ursprüngliche Photoshop-Aufbau ist. Prüfe nach der Konvertierung Silhouette, Farbbereiche, Textformen, Negativraum und Knotenstruktur. Wenn das PSD bereits saubere Vektorquellen enthält, übertrage diese stattdessen direkt.

Prüfe, was im SVG erhalten geblieben ist

Öffne das heruntergeladene SVG erneut in einem Vektoreditor, statt der ersten Vorschau zu vertrauen.

• Wähle einen Farbbereich aus. Er sollte sich wie ein Pfad oder eine Form verhalten, nicht wie ein Teil eines einzigen Bildrechtecks.
• Öffne das Ebenen- oder Objektebedienfeld. Suche nach einer handhabbaren Gruppenstruktur, statt die PSD-Ebenennamen zu erwarten.
• Zoome in Kurven und Buchstabeninnenräume. Prüfe auf abgeflachte Stellen, unbeabsichtigte Schließungen und verrauschte Kanten.
• Ändere eine Füllfarbe. Ein echter Pfad sollte sich umfärben lassen, ohne benachbarte Bereiche zu verändern.
• Suche im Quelltext nach einem <image>-Element, wenn ein Bereich weiterhin verpixelt.
• Importiere das SVG in sein tatsächliches Ziel und prüfe dort Größe, Schriften, Masken und Effekte.

Wenn sich alle sichtbaren Teile zusammen wie ein einziges Objekt verhalten, nutze die Diagnose zum Aufheben von SVG-Gruppierungen, bevor du destruktive Pfadoperationen anwendest. Die Datei kann ein zusammengesetzter Pfad oder ein eingebettetes Bild statt einer Gruppe sein.

Wann das PSD ein PSD bleiben sollte

Behalte Photoshop als Master, wenn du weiterhin bearbeitbaren Text, Einstellungsebenen, Masken, Smart Objects, Zeichenflächen, fotografische Textur oder Effekte brauchst. SVG ist ein starkes Ausgabeformat für skalierbare grafische Formen, aber kein Ersatz für ein Photoshop-Dokument.

Am Ende hast du vielleicht zwei Dateien: das PSD als bearbeitbare Quelle und ein SVG als Produktionsasset. Das ist eine sinnvolle Übergabe. Die beiden Dateien erhalten unterschiedliche Arten der Bearbeitbarkeit.

FAQ

Kann ein PSD mit allen intakten Ebenen in SVG umgewandelt werden? Nicht zuverlässig. Manche Form- und Textinhalte können in SVG übertragen werden, aber Photoshop-Masken, Effekte, Smart Objects, Einstellungsebenen, Ebenennamen und Pixelebenen haben keine Eins-zu-eins-Entsprechungen in SVG. Erhalte zuerst native Vektorobjekte und behandle den Rest als gerenderte Darstellung.

Warum hat mein PSD-zu-SVG-Ergebnis nur eine Ebene? Der Konverter hat wahrscheinlich ein zusammengeführtes Gesamtbild verwendet oder ein Rasterbild eingebettet. Ein SVG-Objekt kann auch ein zusammengesetzter Pfad oder eine Gruppe sein. Prüfe deshalb den Objekttyp, bevor du annimmst, dass die Datei weiterhin Rasterinhalt ist.

Vektorisiert das Speichern einer Photoshop-Datei als SVG die Pixel? Nein. SVG kann Rasterbilder enthalten. Ein Formatexport kann Pixel in einem SVG-Container platzieren, ohne sie zu vektorisieren. Prüfe, ob sich die Grafik als Pfade auswählen lässt und auf Objektebene bearbeitbar bleibt.

Sollte ich Text vor dem SVG-Export aus Photoshop in Pfade umwandeln? Wandle eine Ausgabekopie in Pfade um, wenn die Darstellung fest bleiben muss und Textbearbeitung nicht mehr benötigt wird. Behalte einen Master mit bearbeitbarem Text, wenn Wortlaut oder Lokalisierung sich ändern könnten. Das Umwandeln in Pfade erhält keine Schriftbearbeitung; es macht Buchstaben zu Pfaden.

Kann PerfectVector Photoshop-Ebenen aus einem PSD wiederherstellen? Nein. PerfectVector verwendet das gespeicherte zusammengeführte Kompatibilitätsbild der unterstützten Datei und vektorisiert dieses sichtbare Bild in Pfade. Es rekonstruiert weder den ursprünglichen Photoshop-Ebenenstapel noch bearbeitbare Dokumentfunktionen.

Quellen

1. Adobe — Bildassets aus Ebenen erstellen — Dokumentiert SVG-Asset-Erzeugung und das Reduzieren von Ebenengruppen-Assets auf ein flaches Bild.
2. Adobe — Ebenen als Dateien exportieren — Dokumentiert das aktuelle Exportverhalten pro Ebene.
3. Adobe — Formen und Pfade in Photoshop zeichnen — Definiert Photoshops Form-, Zeichenstift- und Pfadwerkzeuge.
4. W3C — Eingebettete SVG-Inhalte — Erklärt, warum ein SVG weiterhin Rasterbilddaten enthalten kann.
5. PerfectVector — Photoshop zu SVG — Beschreibt den unterstützten Workflow mit gespeichertem Gesamtbild und seine Grenzen bei der Ebenenwiederherstellung.

---

Wenn das gespeicherte Gesamtbild die benötigte Quelle ist, prüfe es im Photoshop-zu-SVG-Konverter, vektorisiere es, öffne das SVG dann erneut und bestätige, dass die wichtigen Bereiche Pfade sind.