Bild in 3 Schritten vektorisieren
- Laden Sie das Bild (PNG, JPG, WebP, BMP oder TIFF) im Konverter oben hoch.
- Konvertieren. vtracer zeichnet es vollfarbig nach; Bilder, die breiter als 1.200 px sind, werden zuvor auf 1.200 px verkleinert.
- Laden Sie das SVG herunter und bereinigen Sie es in Inkscape, Illustrator oder Figma: verirrte Flecken löschen, Formen zusammenfügen, umfärben.
Das funktioniert auch auf dem Smartphone: Öffnen Sie die Seite im mobilen Browser und laden Sie das Bild hoch.
Was ist Vektorisierung?
Vektorisierung (auch Tracing genannt) ist der Prozess, ein Rasterbild — ein Gitter farbiger Pixel — in ein Vektorbild — eine Menge mathematischer Kurven und Formen — umzuwandeln. Beide Darstellungen sind grundlegend verschieden:
- Raster (PNG, JPG, BMP): Jeder Pixel speichert einen Farbwert. Das Bild hat eine feste Auflösung. Wird es über diese Auflösung hinaus vergrößert, entstehen unscharfe, interpolierte Ergebnisse.
- Vektor (SVG, AI, EPS): Formen werden durch mathematische Gleichungen definiert — Bézier-Kurven, Linien, Bögen. Die Rendering-Engine berechnet die Mathematik bei jeder Zielgröße neu und erzeugt von einem 16-Pixel-Favicon bis zu einem 10-Meter-Plakat perfekte Schärfe.
Vektorisierung ist keine einfache Formatkonvertierung wie PNG zu JPEG. Es handelt sich um eine Rekonstruktion: Die Software analysiert Pixelgrenzen, erkennt Kanten und erstellt eine völlig neue mathematische Darstellung, die das Originalbild annähert. Die Qualität dieser Annäherung hängt stark von den Eigenschaften des Quellbildes ab.
Unsere Konvertierungs-Pipeline
Wenn Sie ein PNG (oder JPG, BMP, WebP, TIFF) bei CleverUtils hochladen und in SVG konvertieren, durchläuft die Datei eine mehrstufige Pipeline. Wer jede Stufe versteht, weiß, warum bestimmte Bilder hervorragend vektorisiert werden und andere unerwartete Ergebnisse liefern.
Stufe 1: Dekodieren und Skalieren (ImageMagick)
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.
Stufe 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.
Stufe 3: Kanten-Tracing
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.
Stufe 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.
Stufe 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.
| Quelltyp | Qualität | Warum es funktioniert |
|---|---|---|
| Logos auf weißem Hintergrund | Ausgezeichnet | Hoher Kontrast, saubere Kanten, einfarbige Füllungen |
| Strichzeichnungen und Skizzen | Ausgezeichnet | Starke Tinten-/Bleistiftlinien auf weißem Papier |
| Icons (Flat Design) | Ausgezeichnet | Geometrische Formen, einheitliche Farben, saubere Grenzen |
| Text und Typografie | Ausgezeichnet | Scharfe Kanten, gleichmäßiges Schwarz auf Weiß |
| Silhouetten | Ausgezeichnet | Reines Schwarz/Weiß, saubere Umrisse, keine inneren Details |
| Stempel und Siegel | Sehr gut | Hoher Kontrast, aber verblasste Bereiche benötigen ggf. Schwellenwert-Anpassung |
| Technische Diagramme | Sehr gut | Saubere Linien, aber sehr dünne Linien benötigen ggf. niedrigeren Schwellenwert |
| Handgezeichnete Designs | Gut | Starke Tintenlinien funktionieren; leichte Bleistiftstriche können verloren gehen |
Der gemeinsame Nenner: hoher Kontrast, klare Kanten, begrenzter Tonumfang. Wenn das Bild auf reines Schwarz-Weiß reduziert noch erkennbar ist, lässt es sich gut vektorisieren.
Was sich schlecht vektorisieren lässt
Farb-Clustering versagt bei Bildern mit kontinuierlicher Tonskala. Weiche Verläufe zerfallen in viele Bänder aus Volltonfarben, was posterisiert aussieht und das SVG groß macht.
- Fotografien: Porträts, Landschaften und Produktfotos enthalten fließende Verläufe über Haut, Himmel, Laub und Stoff. Das Tracing verwandelt alles in Hunderte flächige Farbflecken und erzeugt ein posterisiertes Erscheinungsbild. Die SVG-Datei kann zudem enorm groß werden — Tausende winziger Pfade versuchen, sanfte Tonübergänge anzunähern.
- Weiche Verläufe: Abendhimmel, Farbübergänge, Vignetten-Effekte und Schatten werden in einzelne Bänder flächiger Farbe mit gezackten Grenzen zerschnitten.
- Komplexe Texturen: Gewebemuster, Holzmaserung, Fell, Papiertextur — diese erzeugen eine große Anzahl winziger Vektorpfade, die verrauscht wirken und keinen praktischen Nutzen haben.
- Niedrig aufgelöste Quellen: Ein 100×100 Pixel großes Vorschaubild liefert so wenige Datenpunkte, dass die Kurvenanpassung raue, blockige Pfade erzeugt. Die Ausgabe wirkt unabhängig vom Inhalt eckig und grob.
- Stark komprimierte JPEGs: JPEG-Kompression erzeugt blockige 8×8-Pixel-Artefakte an Kanten. Der Tracer folgt diesen Kompressionsartefakten statt den eigentlichen Bildkanten und erzeugt verrauschte, gezackte Vektorpfade.
Faustregel: Wenn das Bild auch mit einer Handvoll flächiger Farben noch gut erkennbar ist, lässt es sich gut vektorisieren. Wenn es auf Tonfeinheiten oder fotografische Details angewiesen ist, ist Vektorisierung der falsche Ansatz.
Tipps zur Qualitätsoptimierung
Die größten Verbesserungen erzielen Sie durch die Vorbereitung des Quellbildes vor dem Hochladen, nicht durch das Anpassen von Potrace-Parametern. Diese Schritte funktionieren in jedem Bildbearbeitungsprogramm.
Die höchste verfügbare Auflösung verwenden
Mehr Pixel liefern dem Tracer mehr Kanteninformationen und glattere Umrisse, allerdings nur bis zu einem gewissen Punkt: Der Konverter auf dieser Seite verkleinert Bilder, die breiter als 1.200 px sind, vor dem Tracing auf 1.200 px. Eine scharfe Vorlage in etwa dieser Breite liefert das beste Ergebnis; ein 100-px-Vorschaubild ergibt raue, blockige Pfade.
Quelle bereinigen
Entfernen Sie bei gescannten Bildern Hintergrundrauschen und Artefakte, bevor Sie hochladen. Verwenden Sie eine Tonwert- oder Gradationskurven-Korrektur, um den Hintergrund in Richtung reines Weiß und den Vordergrund in Richtung reines Schwarz zu schieben. Entfernen Sie Staubflecken, Papiertextur und Scan-Artefakte mit einem leichten Weichzeichner oder Entfleckungsfilter. Schneiden Sie das Bild eng zu, um Randschatten zu beseitigen.
Kontrast erhöhen
Ziehen Sie den Kontrastregler nach oben. Stärkerer Kontrast bedeutet einen größeren Abstand zwischen den Helligkeitswerten von Vordergrund und Hintergrund und damit eine sauberere Trennung beim Schwellenwert. Bei S/W-Bildern hat die ideale Vorlage nur zwei Töne: reines Schwarz und reines Weiß, ohne etwas dazwischen.
PNG statt JPEG verwenden
JPEG-Kompression erzeugt sichtbare blockige Artefakte an scharfen Kanten — genau den Bereichen, die Potrace für das Kanten-Tracing analysiert. Diese Artefakte erzeugen gezackte, verrauschte Vektorpfade, die Kompressionsgrenzen statt tatsächlicher Bildkanten folgen. Wenn Sie die Wahl haben, verwenden Sie immer PNG. Falls nur JPEG verfügbar ist, nutzen Sie die Version mit der höchsten Qualität (am wenigsten komprimiert).
Schwellenwert anpassen
Der Konverter auf dieser Seite zeichnet in Farbe nach und hat keinen Schwellenwert. Wenn Sie mit Potrace oder Inkscape in Schwarz-Weiß nachzeichnen, beginnen Sie bei 0,5; erhöhen Sie bei verblassten oder hellen Vorlagen auf 0,6–0,7, oder senken Sie auf 0,3–0,4, wenn der Hintergrund Rauschen aufnimmt.
Potrace-Einstellungen erklärt
Wenn Sie mit Potrace in Schwarz-Weiß nachzeichnen (direkt oder über Inkscape), bestimmen diese Parameter das Ergebnis. Der Konverter auf dieser Seite verwendet stattdessen vtracer mit festen Einstellungen.
| Parameter | Flag | Bereich | Standard | Effekt |
|---|---|---|---|---|
| Schwellenwert | -k |
0,0–1,0 | 0,5 | Helligkeitsschwelle für die Binärkonvertierung. Niedriger = hellere Ausgabe, höher = kräftigere Ausgabe |
| Ecken-Glättung | -a |
0–1,334 | 1 | 0 = alle Ecken scharf. 1,334 = maximale Glättung. Steuert Kurve vs. Winkel an Ecken. |
| Optimierung | -O |
ab 0 | 0,2 | Toleranz der Kurvenoptimierung. Höher = weniger Segmente, kleinere Datei, geringere Genauigkeit |
| Rauschunterdrückung | -t |
0–100+ | 2 | Maximale Pixelfläche isolierter Bereiche, die verworfen werden. Höher = entfernt größere Flecken |
Empfohlene Einstellungen nach Quelltyp
| Quellbild | Schwellenwert | Ecken | Turdsize | Hinweise |
|---|---|---|---|---|
| Sauberes S/W-Logo | 0,5 | 1 (glatt) | 2 | Standardwerte funktionieren perfekt für kontrastreiche Logos |
| Bleistiftskizze | 0,35–0,45 | 1,334 (max) | 0 | Niedrigerer Schwellenwert vermeidet Papiertextur; max. Glättung für fließende Linien |
| Tintenstempel / Siegel | 0,55–0,65 | 1 (glatt) | 10–20 | Höherer Schwellenwert erfasst vollen Stempel; hoher Turdsize entfernt Spritzer |
| Gescanntes Dokument | 0,5–0,6 | 0 (scharf) | 5–15 | Scharfe Ecken für Text; moderate Rauschunterdrückung für Papierstaub |
| Verblasste / helle Quelle | 0,65–0,8 | 1 (glatt) | 2–5 | Höherer Schwellenwert erfasst bei 0,5 verlorenen Inhalt |
| Pixel-Art / QR-Code | 0,5 | 0 (scharf) | 0 | Scharfe Ecken erhalten Geometrie; keine Rauschunterdrückung |
Mehrfarbige Vektorisierung
Potrace erzeugt ausschließlich Schwarz-Weiß-Ausgaben: eine einzelne binäre Ebene, an ihrer Grenze nachgezeichnet. Der Konverter auf dieser Seite umgeht diese Einschränkung mit vtracer, das Farben gruppiert und jede Farbregion in einem Durchgang nachzeichnet.
Für mehrfarbige Vektorisierung gibt es alternative Ansätze:
- Mehrfach-Tracing: Potrace mehrfach mit unterschiedlichen Schwellenwerten ausführen, wobei jeder Durchlauf ein anderes Helligkeitsband erfasst. Die resultierenden SVG-Ebenen mit verschiedenen Füllfarben übereinanderlegen. Inkscapes „Bitmap nachzeichnen" bietet dies als „Mehrere Scans: Helligkeitsstufen".
- Farbquantisierung + Ebenentrennung: Das Bild auf eine begrenzte Farbpalette (4–16 Farben) reduzieren, jede Farbe in eine binäre Maske trennen und jede Maske unabhängig tracken. Tools wie Inkscapes „Mehrere Scans: Farben" automatisieren dies.
- Adobe Illustrator Image Trace: KI-gestütztes Tracing, das mehrere Farben, Verläufe und komplexe Formen verarbeitet. Erzeugt sauberere mehrfarbige Ausgaben als Ebenenstapelung, erfordert aber ein kostenpflichtiges Abonnement.
- KI-gestützte Dienste: Tools wie Vectorizer.AI verwenden maschinelles Lernen, um Formen zu identifizieren, Farben zu trennen und saubere mehrfarbige SVGs zu erzeugen. Bessere Ergebnisse als algorithmische Methoden für komplexe Bilder, aber typischerweise pro Bild kostenpflichtig.
Für die häufigsten Vektorisierungsanwendungsfälle — Logo-Konvertierung, Strichzeichnungs-Tracing, Schneidedatei-Erstellung — ist Potraces S/W-Ausgabe genau das Richtige, und sie läuft sofort und kostenlos.
Praktische Anwendungsfälle
Logo-Upscaling
Der häufigste Grund zur Vektorisierung: Ihr Logo existiert nur als kleines PNG oder JPEG, und Sie benötigen es in viel größeren Formaten für Druck, Beschilderung oder Merchandise. Durch die Vektorisierung wird das rasterbasierte Bild mit fester Auflösung in ein unbegrenzt skalierbares SVG umgewandelt. Die SVG-Version kann auf einem Plakat gedruckt, auf einem Hut gestickt oder als Favicon angezeigt werden — alles aus derselben Datei.
SVG-Icons für das Web
Wenn Sie einen Icon-Satz als PNG-Dateien haben, bietet die Vektorisierung zu SVG Auflösungsunabhängigkeit (scharf auf allen Bildschirmen), CSS-Styling (Farben bei Hover oder Dark Mode ändern), kleinere Dateigrößen und die Möglichkeit, sie in HTML einzubetten, um zusätzliche HTTP-Anfragen zu vermeiden.
Schneidemaschinen (Cricut, Silhouette, Laser)
Cricut, Silhouette und Laserschneider benötigen Vektordateien, um Werkzeugpfade zu erzeugen. Die Maschine folgt den Vektorpfaden exakt — der Schneider oder Laser folgt den mathematischen Kurven. Wenn Ihr Design nur als PNG vorliegt, ist die Vektorisierung die Brücke zwischen dem Rasterdesign und dem physischen Schneidvorgang. Saubere, kontrastreiche Quellbilder erzeugen die besten Schneidpfade.
Stickerei
Stickmaschinen benötigen Vektorumrisse, um Stichmuster zu erzeugen. Die Vektorformen bestimmen Stichrichtung, -dichte und Füllmuster. Die Vektorisierung eines Logo-PNGs zu SVG ist in der Regel der erste Schritt bei der Erstellung einer Stichdatei (.PES, .DST, .EXP). Einfache Formen mit klaren Grenzen erzeugen die saubersten Stichergebnisse.
Web-Performance-Optimierung
Das Ersetzen von PNG-Icons und Logos durch SVG auf einer Website reduziert das Seitengewicht (ein SVG ersetzt mehrere auflösungsspezifische PNGs), verbessert die Schärfe auf Retina-Displays und ermöglicht CSS-basiertes Theming. Eine typische Website mit 20 Icons kann durch den Wechsel von PNG zu SVG 200–400 KB einsparen und damit die Core Web Vitals-Werte direkt verbessern.
Großformat-Druck
Messestandbanner, Fahrzeugfolierungen, Gebäudebeschilderungen und Ausstellungsdisplays erfordern Artwork, das bei physischen Größen von mehreren Metern gestochen scharf gerendert wird. Rasterbilder, die auf dem Bildschirm gut aussahen, werden bei großen Druckformaten sichtbar unscharf. Die Vektorisierung des Designs stellt mathematische Schärfe in jeder Ausgabegröße sicher, die die Druckerei benötigt.
Bild in Inkscape und Illustrator vektorisieren
Inkscape (kostenlos)
- Importieren Sie das Bild (Datei → Importieren) und markieren Sie es.
- Öffnen Sie Pfad → Bitmap nachzeichnen (Shift+Alt+B).
- Wählen Sie Helligkeitsschwelle für eine Farbe oder Mehrere Scans → Farben für mehrere und klicken Sie auf Anwenden.
- Schieben Sie die Nachzeichnung beiseite, löschen Sie die Bitmap und speichern Sie als Normales SVG.
Adobe Illustrator
- Markieren Sie das platzierte Bild und öffnen Sie Fenster → Bildnachzeichner.
- Wählen Sie eine Vorgabe (Schwarzweiß-Logo, 6 Farben, Foto mit hoher Wiedergabetreue) und passen Sie Schwellenwert oder Farben an.
- Klicken Sie auf Umwandeln, um bearbeitbare Pfade zu erhalten, und exportieren Sie dann über Datei → Exportieren → Exportieren als → SVG.
Automatisches Nachzeichnen ist kostenlos. Einen Designer ein Logo von Hand neu zeichnen zu lassen kostet mehr, liefert bei komplexen oder schlechten Vorlagen aber das sauberste Ergebnis.