PNG und JPG in bearbeitbare SVG umwandeln: Methoden und Dateiprüfung

Um eine PNG- oder JPG-Datei in eine bearbeitbare SVG-Datei umzuwandeln, müssen Sie die sichtbaren Formen vektorisieren oder als Vektoren neu zeichnen. Ein Bild in einen SVG-Container einzubetten, ist keine Vektorisierung. Entscheidend ist, ob Sie nach dem Entfernen des ursprünglichen Rasterbilds die Füllfarbe oder Kontur eines Bestandteils ändern können – nicht die Dateiendung .svg.

Die automatische Vektorisierung eignet sich besonders für flache Icons, klare Silhouetten und einfache Illustrationen. Bei Fotos, weichen Schatten oder strukturierten Gemälden ist meist ein Kompromiss nötig: das Rasterbild beibehalten, eine vereinfachte Vektorfassung akzeptieren oder einzelne Elemente von Hand nachbauen. KI kann beim Neuzeichnen helfen. Das Ergebnis ist jedoch eine neue Interpretation, deren Übereinstimmung mit der Vorlage gesondert geprüft werden muss.

Dieses Tutorial enthält eine eigens per Code erstellte geometrische Tassen-Testgrafik, tatsächlich lokal erzeugte Vektorisierungsergebnisse, einen absichtlich irreführenden SVG-Container mit Rasterbild sowie eine umgefärbte Vektorfassung. Die Testgrafiken sind keine KI-Modellausgaben. Die Konvertierung wurde am 11. November 2026 mit VTracer 0.6.15 durchgeführt. Kostenpflichtige Illustrator- oder KI-Konvertierungsdienste haben wir für diesen Artikel nicht getestet.

Beispiele herunterladen und Unterschiede prüfen

Laden Sie das PNG-zu-SVG-Beispielpaket herunter. Es enthält mug.png, mug-wrapped.svg, mug-traced.svg, mug-recolored.svg, eine Testgrafik mit Farbverlauf, das Konvertierungsskript und den Prüfbericht. Probieren Sie diese Dateien aus, bevor Sie ein Kundenlogo oder einen vertraulichen Entwurf verwenden.

Die Pfadzahlen sind Messwerte dieser Dateien, keine Zielvorgaben. Vier Pfade können eine brauchbare einfache Illustration bilden; Hunderte Pfade können trotzdem schwer zu bearbeiten sein. Umgekehrt darf eine Vektorgrafik Rechtecke, Kreise oder Text enthalten, ohne einen einzigen Pfad zu verwenden. Prüfen Sie den tatsächlichen Inhalt und die konkret benötigte Änderung.

Englischer Browser-Screenshot unseres lokalen Prüfviewers. Die Vorlage wurde per Code erstellt; zu sehen sind tatsächliche Vektorisierungsergebnisse, keine Oberfläche eines KI-Produkts.

Vektorisierung, Neuzeichnung oder Mischdatei wählen

Vektorisieren Sie, wenn die bestehende Kontur erhalten bleiben soll. Gute Vorlagen haben eine klare Silhouette, genügend Auflösung und wenige Farbflächen. Verwenden Sie möglichst das beste Original statt einer aus einer Präsentation kopierten Miniatur. JPEG-Kompression kann kleine Farbinseln erzeugen, aus denen unerwünschte Formen entstehen.

Zeichnen Sie neu, wenn eine sinnvolle Objektstruktur wichtiger ist als exakte Pixelübereinstimmung. Die Vorgabe „Tasse, Henkel und Untertasse in benannte Gruppen aufteilen“ hilft beispielsweise, wenn Sie diese Teile später animieren oder neu anordnen wollen. Ein automatischer Konverter erkennt meist zusammenhängende Farben, keine inhaltlich zusammengehörigen Objekte. KI kann eine übersichtlichere Gruppierung liefern, aber auch Proportionen verändern, Details entfernen oder Text erfinden. Behandeln Sie eine Neuzeichnung als Entwurfsänderung, die freigegeben werden muss.

Behalten Sie eine Mischdatei bei, wenn Rasterbilder sinnvoll sind. Ein fotografischer Hintergrund mit Vektorbeschriftungen ist eine legitime SVG-Datei. Falsch wäre es, die gesamte Datei als vektorisiertes Foto zu bezeichnen. Erklären Sie, welche Teile Rasterbilder bleiben, und bewahren Sie eine hochauflösende Quelle auf. Ein skalierbarer Container garantiert keine unbegrenzt vergrößerbaren Fotodetails.

Wenn Sie neue Vektorgrafiken erzeugen statt vorhandene Bilder konvertieren möchten, lesen Sie die SVG-Anleitung für Image 2.6 (Englisch). Die Ausgangspunkte und Abnahmekriterien unterscheiden sich. Wird bei diesem Modell eine SVG-/GIF-Anfrage abgelehnt, hilft die Fehlerbehebung zu Ausgabeformaten und Parametern von Image 2.6 (Englisch); eine andere Dateiendung löst das Problem nicht.

In einem Grafikeditor vektorisieren

Die Inkscape-Anleitung zur Vektorisierung beschreibt den Import und den Befehl Pfad → Bitmap nachzeichnen (in der englischen Oberfläche: Path → Trace Bitmap). Für eine einfache einfarbige Silhouette genügt ein einzelner Scan; für getrennte Farbflächen verwenden Sie die Farbvektorisierung. Prüfen Sie die Vorschau und passen Sie die Einstellungen an die Vorlage an, statt für jedes Bild dieselbe Voreinstellung zu nutzen.

Verschieben Sie das Ergebnis nach der Vektorisierung zur Seite. Viele Editoren legen es über das Original, wodurch ein schwaches Ergebnis besser aussehen kann, als es ist. Blenden Sie in einer Dokumentkopie das ursprüngliche Rasterbild aus oder entfernen Sie es. Prüfen Sie Kontur, Aussparungen und kleine Details. Färben Sie einen Bestandteil um, speichern Sie die SVG-Datei und öffnen Sie sie erneut. So unterscheiden Sie zwischen „Vektorisierung erzeugt“ und „Vektorisierung brauchbar“.

Der offizielle Bildnachzeichner-Workflow von Illustrator beginnt mit dem Platzieren und Auswählen des Bilds sowie dem Öffnen des Bildnachzeichner-Bedienfelds. Wählen Sie eine passende Vorgabe, prüfen Sie die Vorschau und wandeln Sie das Ergebnis um, wenn Sie normale bearbeitbare Pfade benötigen. Diese Alternative stützt sich auf die Dokumentation; die herunterladbaren Ergebnisse hier wurden mit VTracer erzeugt, nicht mit Illustrator.

Text braucht eine gesonderte Behandlung. Beim Nachzeichnen von Buchstaben entstehen meist Konturen statt bearbeitbarer Schrift. Soll sich der Wortlaut später ändern lassen, setzen Sie den Text mit einer verfügbaren Schrift neu und prüfen Sie Zeilenumbrüche und Abstände. Behalten Sie eine Arbeitskopie mit bearbeitbarem Text und erstellen Sie bei Bedarf eine separate Auslieferungsfassung mit Textkonturen. Konturen erhalten die Formen, nehmen Ihnen aber die normale Textbearbeitung.

Die lokale Konvertierung nachvollziehen

Das VTracer-Projekt stellt einen Raster-zu-Vektor-Konverter bereit. Dieses Beispiel fixiert die tatsächlich verwendete Version; neuere Versionen können andere APIs haben. Entpacken Sie das ZIP in einen neuen Ordner, öffnen Sie dort ein Terminal und führen Sie Folgendes aus:

python3 -m venv .venv
source .venv/bin/activate
python -m pip install vtracer==0.6.15 Pillow==11.3.0
python convert.py mug.png my-mug.svg

Unter Windows aktivieren Sie die Umgebung mit .venv\Scripts\activate statt mit source. Das Skript überschreibt keine vorhandene Ausgabedatei. Es konvertiert lokal, ruft keine KI-API auf und lädt das Bild nicht hoch. Gibt es kein passendes vorgefertigtes Python-Wheel, können manche Systeme eine Build-Toolchain benötigen. Ein Desktopeditor ist dann eine sinnvolle Alternative zur Behebung des Installationsproblems.

Die getesteten Einstellungen verwenden Farbvektorisierung, übereinanderliegende Flächen und Spline-Kurven. Solche Flächen können sich überlappen: Entfernen Sie einen Bestandteil im Vordergrund, kann darunter eine größere Hintergrundform sichtbar werden. Das entspricht nicht zwangsläufig der Objektstruktur, die ein Designer von Hand anlegen würde. Benötigen Sie voneinander unabhängige Formen zum Schneiden oder Fertigen, prüfen Sie Überlappungen und Aussparungen in der Zielanwendung. Eine gelungene Webvorschau reicht dafür nicht aus.

Das mitgelieferte Prüfskript meldet Rasterbildelemente, Vektorgeometrie und Attribute der Zeichenfläche:

python inspect_svg.py my-mug.svg

Das ist eine Hilfe zur Strukturprüfung, kein Sicherheitsaudit und kein Nachweis der visuellen Übereinstimmung. Auch ohne <image>-Element kann eine Datei falsch aussehen, eine fehlende Schrift voraussetzen oder unnötig komplexe Geometrie enthalten. Öffnen Sie nur vertrauenswürdige SVG-Dateien und prüfen Sie generiertes Markup, bevor Sie es in eine Website einbetten.

Umfärben, skalieren und Ergebnis prüfen

Bei unserer Testgrafik färbte die Änderung einer orangefarbenen Füllung zu Violett die Tasse um, ohne ihre Kontur zu verändern. Öffnen Sie mug-recolored.svg neben mug-traced.svg und prüfen Sie, ob die Öffnung des Henkels und die Untertasse unverändert sind. Ändern Sie Füllungen im Grafikeditor über die Objektauswahl; bearbeiten Sie Knoten nur, wenn Sie die Kontur verändern möchten.

Das ZIP enthält mit mug-responsive.svg ein Beispiel mit normalisierter Zeichenfläche. Die ursprüngliche Konverterausgabe legt Breite und Höhe fest, aber keine viewBox. Für ein Dokument mit fester Größe ist das gültig, für responsives Einbetten jedoch unpraktisch. Bei dieser bekannten Testgrafik mit 512 × 384 Pixeln ergänzt das Konvertierungsskript viewBox="0 0 512 384". Leiten Sie die viewBox bei anderen Dateien aus dem tatsächlichen Koordinatensystem ab; übernehmen Sie diese Maße nicht ungeprüft. Testen Sie kleine und große Darstellungen und erhalten Sie das Seitenverhältnis.

Führen Sie für eine praxisnahe Übergabe in einer Kopie drei gezielte Änderungen aus: eine Füllfarbe ändern, ein Objekt verschieben und die gesamte Illustration skalieren. Öffnen Sie die gespeicherte Datei erneut und prüfen Sie, ob alle drei Änderungen erhalten geblieben sind. Das testet den Bearbeitungsablauf, den der Empfänger tatsächlich braucht, und ist aussagekräftiger als eine Miniaturvorschau oder die Erfolgsmeldung eines Konverters.

Mit KI neu zeichnen und die Vorgaben erhalten

Akzeptiert ein KI-Tool eine Bildreferenz und liefert SVG-Code oder eine herunterladbare SVG-Datei, beginnen Sie mit einer klar abgegrenzten Anfrage. Die folgende englische Vorlage ist wiederverwendbar; sie ist kein Beleg dafür, dass wir sie in jedem Tool ausgeführt haben:

Rebuild the attached illustration as a standalone editable SVG.
Preserve the silhouette, proportions and important negative spaces.
Use vector paths or shapes; do not embed the original raster image.
Separate meaningful components into named groups.
Use a viewBox matching the intended aspect ratio.
Do not add text, objects, external images, scripts or external fonts.
If a detail cannot be reproduced reliably, identify it rather than
silently inventing a replacement. Return the SVG and a short list
of simplifications. Keep the original image unchanged.

Verlangen Sie anschließend genau eine kontrollierte Änderung, etwa eine andere Tassenfarbe bei unveränderter Geometrie. Vergleichen Sie die Ausgaben, statt sich auf die Aussage des Agenten zu verlassen, sonst sei alles gleich geblieben. Bei einem Markenzeichen, einer exakt vorgegebenen Kontur oder rechtlich freigegebenen Schriftzügen sollten Sie die Vektorquelldatei verwenden oder einen Designer prüfen lassen. Auch eine attraktive Neuzeichnung kann die Aufgabe verfehlen.

Sie können die Aufgabe in Ofox Chat beginnen, mit einer Referenz, die Sie verwenden dürfen, und den oben genannten Ausgabevorgaben. Die lokalen Vektorisierungsergebnisse dieser Anleitung belegen nicht, dass jeder Chat-Modus SVG erzeugen oder Ihren konkreten Entwurf erhalten kann. Prüfen Sie die zurückgegebene Datei vor der Verwendung.

Häufige Fehler beheben

Unsere Testgrafik mit Farbverlauf zeigt die Grenze deutlich: Die gewählten Einstellungen lieferten nur zwei Pfade und vereinfachten die Farbfläche stark. Das belegt nicht, dass SVG keine Farbverläufe darstellen kann. Es zeigt, warum dieselben automatischen Einstellungen für ein flaches Icon genügen und für ein Bild mit kontinuierlichen Tonwerten ungeeignet sein können.

Zur fertigen Konvertierung gehören die Originalvorlage, die bearbeitbare SVG-Datei und eine Vorschau sowie eine Beschreibung der Vereinfachungen. Bewahren Sie die Arbeitsfassung auf, damit die nächste Änderung nicht mit einer weiteren verlustbehafteten Konvertierung beginnt.