JPG in 3 Schritten in SVG umwandeln
- Laden Sie das JPG im Konverter oben hoch (bis zu 100 MB).
- Konvertieren. Das Bild wird mit vtracer vollfarbig nachgezeichnet. Bilder, die breiter als 1.200 px sind, werden vorher auf 1.200 px verkleinert.
- Laden Sie das SVG herunter und öffnen Sie es in Inkscape, Illustrator, Figma oder Cricut Design Space, um verirrte Formen zu löschen oder es umzufärben.
Logos, Icons und Cliparts mit wenigen flächigen Farben liefern das sauberste Ergebnis. Fotos wirken posterisiert.
Raster vs. Vektor: Der grundlegende Unterschied
Jedes digitale Bild gehört einer von zwei Kategorien an: Raster oder Vektor. Den Unterschied zu verstehen ist entscheidend, um zu wissen, was Vektorisierung leisten kann und was nicht.
Ein Rasterbild (JPG, PNG, BMP, TIFF) speichert ein Bild als rechteckiges Raster farbiger Pixel. Jedes Pixel ist ein kleines Quadrat mit einem einzigen Farbwert. Die Gesamtzahl der Pixel — die Auflösung — bestimmt, wie viel Detail das Bild enthalten kann. Ein 3000×2000-Pixel-Foto enthält 6 Millionen einzelne Farbwerte. Wenn Sie hineinzoomen, sehen Sie irgendwann die einzelnen Quadrate. Wenn Sie das Bild über seine native Auflösung hinaus vergrößern, muss die Software neue Pixel zwischen den vorhandenen erfinden, was ein verschwommenes, interpoliertes Ergebnis erzeugt.
Ein Vektorbild (SVG, AI, EPS, PDF) speichert ein Bild als Satz mathematischer Anweisungen. Ein Kreis wird als Mittelpunkt und Radius beschrieben. Eine Kurve ist eine Bézier-Gleichung mit Kontrollpunkten. Eine gefüllte Region ist ein geschlossener Pfad mit einer Füllfarbe. Da das Bild durch Mathematik statt durch Pixel definiert wird, kann es in jeder Auflösung gerendert werden — von einem 16×16-Favicon bis zu einem 10-Meter-Plakat — und ist jedes Mal perfekt scharf. Die Rendering-Engine berechnet die Kurven einfach für die Zielgröße neu. Unser Vergleich von SVG und PNG zeigt, wann welches Format die richtige Wahl ist.
| Eigenschaft | Raster (JPG, PNG) | Vektor (SVG) |
|---|---|---|
| Datenmodell | Raster farbiger Pixel | Mathematische Pfade und Kurven |
| Skalierung | Verliert Qualität beim Vergrößern | Unendlich skalierbar, immer scharf |
| Dateigröße | Proportional zur Pixelanzahl | Proportional zur Pfadkomplexität |
| Geeignet für | Fotos, komplexe Szenen | Logos, Icons, Illustrationen, Strichzeichnungen |
| Bearbeitung | Pixelebene (Photoshop, GIMP) | Pfadebene (Illustrator, Inkscape) |
| Transparenz | PNG ja, JPG nein | Vollständige Unterstützung |
| Animation | Nicht nativ | CSS und JavaScript |
Dieser grundlegende Unterschied bedeutet, dass die Konvertierung von Raster zu Vektor nicht wie die Konvertierung von WAV zu MP3 oder JPG zu PNG ist. Das sind Formatänderungen innerhalb desselben Datenmodells (Pixel zu Pixel oder Samples zu Samples). Raster-zu-Vektor-Konvertierung ist eine Rekonstruktion — die Software muss die Pixeldaten interpretieren und eine völlig neue mathematische Darstellung des Bildes erstellen.
Wie Auto-Vektorisierung funktioniert
Wenn Sie ein JPG-Bild zu CleverUtils hochladen und es in SVG konvertieren, durchläuft die Datei eine mehrstufige Pipeline. Das Verständnis jedes Schritts erklärt, warum bestimmte Bilder wunderschön vektorisiert werden, während andere unerwartete Ergebnisse liefern.
Schritt 1: Dekodieren und Skalieren
ImageMagick dekodiert den Upload (JPG, PNG, WebP, TIFF, PSD und weitere Formate) und korrigiert die EXIF-Drehung. Bilder, die breiter als 1.200 px sind, werden auf 1.200 px Breite verkleinert, damit das Tracing schnell bleibt. Vektor- oder Ebenendateien wie PDF, EPS oder PSD werden zuerst auf einen weißen Hintergrund reduziert.
Schritt 2: Farb-Clustering
Der Tracer vtracer fasst benachbarte Pixel ähnlicher Farbe zu Regionen zusammen. Unsere Einstellungen behalten 6 Bit Genauigkeit pro Farbkanal, sodass sehr ähnliche Farbtöne zu einer flächigen Farbe verschmelzen. Deshalb werden Verläufe zu Bändern aus Volltonfarben.
Flecken mit weniger als 4 Pixeln werden als Störpixel verworfen.
Schritt 3: Kantenverfolgung
vtracer folgt dem Umriss jeder Farbregion. Die Regionen werden gestapelt: Größere Formen liegen unten, kleinere darüber, sodass zwischen benachbarten Farben keine Lücken entstehen.
Schritt 4: Polygon-Anpassung
Unser Konverter betreibt vtracer im Polygonmodus: Jeder Umriss wird zu einer Kette gerader Liniensegmente, nicht zu Bézier-Kurven. Richtungswechsel, die schärfer als 60° sind, bleiben als Ecken erhalten. Polygone halten Logos und Schriftzüge scharf; runde Formen wirken bei starkem Zoom leicht facettiert.
Schritt 5: SVG-Ausgabe
Jede Region wird als SVG-<path> mit einer einheitlichen Füllfarbe geschrieben. Die Datei lässt sich in jedem Browser sowie in Inkscape, Illustrator, Figma und Cricut Design Space öffnen.
Befehl: vtracer --input in.png --output out.svg --colormode color --hierarchical stacked --mode polygon --filter_speckle 4 --color_precision 6 --corner_threshold 60 --segment_length 3.5
Kann vtracer eine Datei nicht verarbeiten, greift der Konverter auf potrace zurück, das ein schwarz-weißes SVG erzeugt.
Was sich gut vektorisieren lässt
Tracing funktioniert am besten, wenn ein Bild aus wenigen flächigen Farben mit klaren Kanten besteht. Jede flächige Farbe wird zu einer sauberen Form. Wie Sie das Quellbild vorbereiten und das Ergebnis bereinigen, erfahren Sie in der Anleitung Bild Schritt für Schritt vektorisieren.
| Bildtyp | Qualität | Grund |
|---|---|---|
| Logos auf weißem Hintergrund | Hervorragend | Hoher Kontrast, saubere Kanten, Volltonfarben |
| Strichzeichnungen und Skizzen | Hervorragend | Starke schwarze Linien auf weißem Papier |
| Text und Typografie | Hervorragend | Scharfe Kanten, einheitliche Farbe |
| Silhouetten | Hervorragend | Reines Schwarz/Weiß, saubere Umrisse |
| Einfache Icons | Hervorragend | Geometrische Formen, Vollflächen |
| Stempel und Siegel | Sehr gut | Hoher Kontrast, möglicherweise Schwellenwertanpassung nötig |
| Handgezeichnete Designs | Sehr gut | Starke Linien vektorisieren gut; leichte Bleistiftstriche können ausfallen |
| Technische Diagramme | Sehr gut | Saubere Linien, aber dünne Linien benötigen möglicherweise einen niedrigeren Schwellenwert |
Der gemeinsame Nenner: hoher Kontrast, klare Kanten, begrenzter Tonwertbereich. Wenn Sie das Bild zusammenkneifen und trotzdem seine wesentliche Form erkennen können, wird es sich gut vektorisieren lassen.
Was sich NICHT gut vektorisieren lässt
Farb-Clustering versagt bei Bildern mit kontinuierlicher Tonwertvariation. Weiche Verläufe zerfallen in viele Bänder aus Volltonfarben, was posterisiert aussieht und das SVG groß macht.
- Fotografien: Ein Porträt oder eine Landschaft enthält weiche Verläufe über Haut, Himmel, Laub und Stoff. Das Tracing verwandelt all dies in Hunderte flächige Farbflecken und erzeugt ein posterisiertes Aussehen. Die SVG-Datei kann zudem enorm groß werden — Tausende winziger Pfade versuchen darzustellen, was ursprünglich eine weiche Tonwertvariation war.
- Komplexe Szenen: Unruhige Bilder mit vielen sich überlappenden Elementen, unterschiedlichen Tiefen und komplexen Hintergründen erzeugen verrauschte, überladene Vektorausgaben mit zu vielen Pfaden, um nützlich zu sein.
- Weiche Verläufe: Ein Sonnenuntergangshimmel, ein Farbverlauf oder ein Vignetten-Effekt werden in einzelne Bänder flächiger Farbe mit gezackten Grenzen zerschnitten.
- Detaillierte Texturen: Gewebemuster, Holzmaserung, Hautporen, Fell — diese feinen Texturen erzeugen eine enorme Anzahl winziger Vektorpfade, die weder gut aussehen noch einem praktischen Zweck dienen.
- Niedrig aufgelöste Bilder: Ein 100×100-Pixel-Vorschaubild gibt dem Tracer so wenige Pixel zum Arbeiten, dass die Kurven rau und blockartig werden. Eine höhere Eingabeauflösung erzeugt glattere Ergebnisse, bis zu der Breite von 1.200 px, mit der der Konverter arbeitet.
- Stark komprimierte JPGs: JPEG-Kompressionsartefakte (blockige Muster an Kanten) verwirren die Kantenerkennung und erzeugen verrauschte Vektorpfade, die die Kompressionsartefakte statt des eigentlichen Bildinhalts nachzeichnen.
Faustregel: Wenn das Bild auch mit einer Handvoll flächiger Farben noch gut erkennbar ist, lässt es sich gut vektorisieren. Wenn das Bild von Verläufen, tonalen Feinheiten oder fotografischen Details lebt, ist Vektorisierung das falsche Werkzeug.
Unsere Tracing-Pipeline (vtracer)
CleverUtils zeichnet Rasterbilder mit vtracer nach, einem Open-Source-Farbtracer von VisionCortex. Anders als potrace, das nur Schwarz-Weiß erzeugt, behält vtracer die Farben des Bildes bei.
Die Konvertierungs-Pipeline besteht aus drei Komponenten:
- ImageMagick — Dekodiert die Eingabedatei (JPG, PNG, WebP, TIFF, PSD usw.), korrigiert die Drehung und verkleinert Bilder, die breiter als 1.200 px sind, auf 1.200 px
- vtracer — Gruppiert Farben und zeichnet jede Region als gefüllten Polygonpfad nach
- potrace — Ausweichlösung für Dateien, die vtracer nicht verarbeiten kann; gibt ein schwarz-weißes SVG mit Bézier-Kurven aus
Der vollständige Befehl:
vtracer --input in.png --output out.svg --colormode color --hierarchical stacked --mode polygon --filter_speckle 4 --color_precision 6 --corner_threshold 60 --segment_length 3.5
Es gibt keine Einstellungen zur Auswahl: Für jede Datei werden dieselben Parameter verwendet. Sie eignen sich für Logos, Icons, Cliparts und flächige Illustrationen.
Vektorisierungseinstellungen erklärt
Wenn Sie ein Bild selbst mit potrace nachzeichnen (etwa über „Bitmap nachzeichnen“ in Inkscape), steuern diese Parameter das Ergebnis. Der Konverter auf dieser Seite verwendet sie nicht: Er betreibt vtracer mit festen Einstellungen.
Schwellenwert (-k)
Der wichtigste Parameter. Steuert den Helligkeits-Grenzwert zwischen Schwarz (Vordergrund) und Weiß (Hintergrund) im binären Konvertierungsschritt. Bereich: 0,0 bis 1,0, Standard 0,5. Unser Leitfaden zu den Schwellenwert-Einstellungen von potrace zeigt, welche Werte sich für Logos, Skizzen und Scans eignen.
| Schwellenwert | Effekt | Geeignet für |
|---|---|---|
| 0,2 | Sehr hell — nur die dunkelsten Pixel werden zu Vordergrund | Dunkle Bilder, schwere Tintenzeichnungen |
| 0,3 | Leichtes Skizzen-Gefühl | Bleistiftzeichnungen, kontrastarme Quellen |
| 0,5 | Ausgewogener Standard — gleichmäßige Aufteilung | Die meisten Logos und Strichzeichnungen |
| 0,7 | Schwerer — erfasst mehr vom Bild | Hellfarbe Quellen, verblasste Dokumente |
| 0,9 | Sehr schwer — fast alles wird zu Vordergrund | Schwache Markierungen von hellen Hintergründen extrahieren |
Eckenglättung (-a)
Steuert, ob der Tracer scharfe Ecken beibehält oder sie in Kurven abrundet. Bereich: 0 bis 1,334, Standard 1.
-a 0— Alle Ecken sind scharf. Gut für geometrische Formen, Pixel-Art und technische Diagramme, bei denen Sie präzise Winkel wünschen.-a 1(Standard) — Moderate Glättung. Ecken nahe 90 Grad bleiben scharf; andere werden abgerundet.-a 1,334— Maximale Glättung. Alle Ecken werden zu Kurven. Erzeugt die glatteste Ausgabe, gut für organische Formen und Handschrift.
Rauschentfernung (-t turdsize)
Entfernt kleine isolierte Flecken aus dem Binärbild vor dem Tracing. Der Wert gibt die maximale Größe (in Pixeln) der zu verwerfenden Bereiche an. Standard: 2.
-t 0— Alles beibehalten, einschließlich Einzelpixel-Rauschen. Verwenden Sie dies nur für sehr saubere Quellbilder.-t 2(Standard) — Entfernt winzige Flecken (1-2 Pixel-Bereiche). Funktioniert für die meisten Bilder.-t 10-50— Entfernt aggressiv kleine Features. Nützlich für gescannte Dokumente mit Staub, Papiertextur oder Kompressionsartefakten.
Optimierung (-O)
Steuert, wie viele Bézier-Kurvensegmente potrace verwendet, um jede Kontur anzunähern. Höhere Optimierung erzeugt einfachere Pfade (weniger SVG-Bytes), aber möglicherweise weniger genaues Tracing. Die Standard-Optimierungsstufe ist eine gute Balance zwischen Genauigkeit und Dateigröße für die meisten Bilder.
Wann vektorisieren?
Vektorisierung ist kein universelles Upgrade — sie ist das richtige Werkzeug für spezifische Anwendungsfälle, bei denen die Eigenschaften von Vektorgrafiken einen klaren Vorteil gegenüber Rasterbildern bieten.
Großformatdruck
Banner, Messedisplays, Fahrzeugfolierungen und Gebäudeschilder erfordern Artwork, das auf Meter skaliert werden kann, ohne an Qualität zu verlieren. Ein Logo, das bei 300×200 Pixeln entworfen wurde, wird auf einem 3-Meter-Banner verschwommen. Die Konvertierung in SVG gibt der Druckerei eine auflösungsunabhängige Datei, die in jeder Größe scharf gerendert wird.
Skalierbare Icons und UI-Elemente
Websites und Anwendungen zeigen Icons in vielen Größen an: 16px in Menüs, 32px in Symbolleisten, 64px in Feature-Karten, 128px in Hero-Bereichen. Für jede Größe ein separates PNG bereitzustellen ist verschwenderisch. Ein einziges SVG-Icon rendert in jeder Größe perfekt, reagiert auf CSS-Styling (Farbe beim Hover ändern) und wiegt typischerweise weniger als eine einzelne PNG-Darstellung.
Gescannte Strichzeichnungen
Architekten, Ingenieure und Künstler scannen häufig handgezeichnete Skizzen, Grundrisse oder technische Diagramme. Das gescannte JPG ist eine Rasteraufnahme von etwas, das ursprünglich mit Linien und Kurven gezeichnet wurde — genau das, was das Vektorformat nativ darstellt. Die Vektorisierung des Scans rekonstruiert die ursprüngliche Absicht und erzeugt saubere, editierbare Vektorpfade aus den gescannten Pixeldaten.
Schneidemaschinen und CNC
Cricut, Silhouette, Laserschneider und CNC-Router benötigen alle Vektoreingaben, um Werkzeugpfade zu erzeugen. Wenn Ihr Design nur als JPG oder PNG existiert, ist Vektorisierung die Brücke zwischen dem Rasterdesign und dem physischen Schneidvorgang. Die Vektorpfade werden zu den genauen Linien, denen die Maschine folgt.
Stickerei und Siebdruck
Stickmaschinen benötigen Vektorumrisse, um Stichmuster zu erzeugen. Siebdruck erfordert saubere Vektortrennung für jede Farbschicht. In beiden Fällen ist die Vektorisierung eines Rasterlogos oder -designs der erste Schritt im Produktionsworkflow.
KI-gestützte Alternativen
vtracer und potrace sind algorithmische Tracer: Sie erkennen Kanten und passen Formen nach festen Regeln an. Sie sind schnell, kostenlos und deterministisch (dieselbe Eingabe ergibt immer dieselbe Ausgabe).
Für Anwendungsfälle, mit denen potrace nicht gut umgehen kann, bieten KI-gestützte Vektorisierer einen anderen Ansatz:
| Merkmal | Algorithmisch (vtracer, potrace) | KI-Vektorisierer |
|---|---|---|
| Farbausgabe | vtracer: Farbe; potrace: Schwarz & Weiß | Volle Mehrfarb-Ausgabe |
| Geschwindigkeit | Schnell (Sekunden oder weniger) | Sekunden bis Minuten |
| Kosten | Kostenlos | Meist kostenpflichtig (pro Bild oder Abo) |
| Geeignet für | Logos, Strichzeichnungen, S&W-Grafiken, Schneiden | Mehrfarbige Illustrationen, stilisierte Fotos |
| Deterministisch | Ja — gleiche Eingabe, gleiche Ausgabe | Kann zwischen Durchläufen variieren |
| Offline verwendbar | Ja (beide sind Open Source) | Meist nur in der Cloud |
Tools wie Vectorizer.AI und Recraft verwenden maschinelles Lernen, um Formen zu identifizieren, Farbschichten zu trennen und saubere mehrfarbige SVG-Ausgaben aus komplexen Bildern zu erzeugen. Sie können vollfarbige Logos, Illustrationen mit Verläufen und sogar einige fotografische Inhalte verarbeiten, die potrace nicht bewältigen kann.
Für die häufigsten Fälle — ein Logo in flächigen Farben, eine Strichzeichnung, eine Cricut-Schnittdatei oder gescannter Text — liefert algorithmisches Tracing schnell und kostenlos gute Ergebnisse. Potrace ist außerdem die Engine hinter der Funktion „Bitmap nachzeichnen“ in Inkscape.
Vorverarbeitungstipps für bessere Ergebnisse
Die Qualität Ihrer SVG-Ausgabe hängt stark von der Qualität Ihres Eingabebildes ab. Einige Minuten Vorbereitung vor dem Hochladen können das Vektorisierungsergebnis dramatisch verbessern.
- Kontrast erhöhen: Öffnen Sie das Bild in einem beliebigen Editor (auch dem integrierten Editor Ihres Smartphones) und schieben Sie den Kontrastregler nach oben. Stärkerer Kontrast bedeutet klarere Kanten für den Tracer.
- Eng zuschneiden: Entfernen Sie unnötigen Hintergrund. Weniger irrelevante Pixel bedeuten eine sauberere Ausgabe und kleinere SVG-Dateien.
- Eine scharfe Vorlage mit etwa 1.200 px Breite verwenden: Der Konverter verkleinert breitere Bilder auf 1.200 px, und deutlich kleinere Bilder ergeben rauere Kanten.
- PNG gegenüber JPG bevorzugen, wenn möglich: JPEG-Kompression erzeugt blockige Artefakte an Kanten. Diese Artefakte verwirren den Tracer und erzeugen verrauschte Vektorpfade. Wenn Ihnen beide Formate vorliegen, verwenden Sie das PNG.
- Zuerst in Graustufen konvertieren: Wenn das Bild von Natur aus schwarz-weiß ist (etwa eine Skizze oder ein Logo), entfernt die Umwandlung in Graustufen vor dem Hochladen Farbrauschen, sodass der Tracer weniger verirrte Farbflecken erzeugt.
- Hintergrundrauschen entfernen: Verwenden Sie bei gescannten Dokumenten eine Tonwert- oder Gradationskurven-Korrektur, um das Papierweiß auf reines Weiß und die Tinte auf reines Schwarz zu bringen. Das beseitigt Papiertextur und Scan-Artefakte.
Weitere Wege, JPG in SVG umzuwandeln
Inkscape (kostenlos)
- Öffnen Sie das JPG über Datei → Öffnen und markieren Sie es.
- Wählen Sie Pfad → Bitmap nachzeichnen (Shift+Alt+B).
- Wählen Sie Einzelner Scan (Helligkeitsschwelle) für Schwarz-Weiß oder Mehrere Scans (Farben) für Farbe und klicken Sie auf Anwenden.
- Löschen Sie die darunterliegende Original-Bitmap und speichern Sie über Datei → Speichern unter → Normales SVG.
Adobe Illustrator
- Platzieren Sie das JPG und markieren Sie es.
- Öffnen Sie Fenster → Bildnachzeichner und wählen Sie eine Vorgabe wie Schwarzweiß-Logo oder 6 Farben.
- Klicken Sie auf Umwandeln, um die Nachzeichnung in bearbeitbare Pfade umzuwandeln, und verwenden Sie dann Datei → Exportieren → Exportieren als → SVG.
Cricut Design Space
Design Space kann ein JPG hochladen und selbst in ein Schneidbild umwandeln. Wenn Sie zuerst in SVG konvertieren, erhalten Sie getrennte Farbebenen und mehr Kontrolle darüber, welche Teile geschnitten werden.