Image Vectorizer

Wie der Vektorisierer funktioniert

Vektorisierung (auch Bitmap-Tracing genannt) konvertiert Pixelkunst in auflösungsunabhängige Pfade. Die Pipeline läuft vollständig in deinem Browser mit drei Stufen. Zuerst quantisiert der Tracer die Eingabepixel in eine kleine Farbpalette - 2 Farben im Schwarz-Weiß-Modus oder 2-32 Farben im Farbmodus. Zweitens geht er die Grenze jedes Farbbereichs und gibt eine Sequenz von Kantensegmenten mit einem Marching-Squares-ähnlichen Kontur-Walk aus. Drittens passt er kubische Bezier-Kurven an diese Segmente an, mittels eines Kurvenanpassungsalgorithmus, der konzeptuell Peter Selingers Potrace ähnelt, und schreibt sie dann als <path>-Elemente in einen einzelnen <svg>-Root.

Die Tracing-Engine hier ist imagetracerjs, ein MIT/Unlicense-JavaScript-Port ähnlicher Ideen. Es läuft in einem dedizierten Web Worker, sodass selbst mehrsekundige Traces großer Bilder die Seite reagierend lassen. Kein SharedArrayBuffer, COOP oder COEP-Header sind erforderlich, was das Tool mit dem Rest von zeroutil.com (und AdSense) kompatibel hält - der Worker ist ein einfacher ES-Modul-Worker.

Was die Steuerungen tatsächlich tun

• Modus: Farbe verwendet eine k-Means-artige Palette mit deterministischer Stichprobe; Schwarz & Weiß erzwingt eine 2-Farb-Palette und überspringt den Chroma-Sampling-Durchlauf. S/W ist etwa 3-4x schneller bei derselben Eingabe.
• Farben (nur Farbmodus): die Größe der quantisierten Palette. 4-8 ist richtig für flache Illustrationen, 12-24 für detaillierte Logos mit Schattierung, 32 für Poster. Mehr Farben bedeutet mehr <path>-Ebenen und eine größere SVG-Datei.
• Pfad-Vereinfachung: mappt auf imagetracerjs's pathomit-Schwellenwert. Höhere Werte verwerfen kurze Pfade (denke: winzige isolierte Farbflecken); niedrigere Werte behalten jede Kontur. Drehe dies hoch, wenn du Rauschen oder Flecken in der Ausgabe siehst.
• Ecken-Schwellenwert: mappt auf ltres + qtres, die Linien- und quadratischen Kurvenanpassungstoleranzen. Niedrigere Werte halten Ecken scharf (gut für Typografie oder Pixelkunst); höhere Werte glätten Konturen (gut für organische Formen und abgerundete Logos).

Wann Vektorisierung sich lohnt

• Ein bearbeitbares SVG aus einem PNG-Logo wiederherstellen, wenn die Original-AI/SVG-Datei verloren gegangen ist.
• Kunstwerk für einen Vinyl-Cutter, Laser-Graveur, Plotter oder Stickmaschine vorbereiten - alle benötigen Vektorpfade, keine Pixel.
• Ein Icon von einem winzigen 64 x 64 PNG auf 4K-Hero-Größe hochskalieren, ohne die Treppenaliasing-Artefakte von Bitmap-Hochskalierung.
• PNG- oder JPEG-Icons in einem Design-System durch SVGs ersetzen, die sich per CSS fill ohne Neu-Export pro Theme umfärben.
• SVG-Pfaddaten für eine CSS / SMIL / GSAP-Animation generieren oder als CSS-clip-path-Quelle verwenden.
• Seitengewicht auf einer Marketing-Website reduzieren, wo ein 200-KB-Hero-PNG ein 6-KB-SVG werden kann, das auf jeden Viewport skaliert.

Wann Vektorisierung dich enttäuschen wird

Tracing hat harte physische Grenzen, und drei Kategorien von Eingaben kommen schlecht heraus, egal wie viel du die Steuerungen feinjustierst.

• Fotografien mit sanften Verläufen. Haut, Himmel, Sonnenuntergänge, unscharfer Bokeh - all das enthält Millionen von subtil variierenden Pixeln. Ein Palette-Quantisierer kollabiert diesen Bereich in eine Handvoll Bänder und das Ergebnis sieht posterisiert aus. Behalte Fotos in JPEG, WebP oder AVIF.
• Geglätteter Text auf einem Foto-Hintergrund. Die halb-transparenten Randpixel, wo der Text auf den Hintergrund trifft, werden zu einer unscharfen Zwischenfarbe, und der Tracer rendert sie als wackelnde Zusatzpfade. Setze den Text stattdessen mit einer echten Schriftart in SVG neu.
• JPEG-komprimierte Strichzeichnungen. JEPGs DCT-Encoder verwischt Kanten und fügt 8 x 8-Block-Artefakte hinzu. Der Tracer reproduziert diese Artefakte treu als wellenförmige Konturen. Wenn du ein PNG desselben Kunstwerks hast, verwende das stattdessen.

Vergleich zu anderen Vektorisierern

Vectorizer.ai ist der aktuelle Qualitätsführer für schwierige Eingaben - es führt ein serverseitiges neuronales Modell aus, das auf echten Vektor-/Raster-Paaren trainiert wurde und überzeugend saubere Pfade aus Fotos und schattierter Kunst wiederherstellen kann. Es ist kostenpflichtig (der kostenlose Tier rastert eine mit Wasserzeichen versehene Vorschau) und erfordert das Hochladen deines Bildes. Inkscapes "Trace Bitmap"-Befehl (Pfad -> Trace Bitmap) ist der Desktop-Standard, stellt den vollständigen Parameterraum von Potrace bereit und läuft lokal - der Kompromiss ist eine schwere Desktop-Installation vs. ein In-Browser-Tool. Potrace selbst ist die C-Referenzimplementierung, die Inkscapes S/W-Trace und viele andere betreibt; es ist unübertroffen für saubere Strichzeichnungen, macht aber nur S/W. Autotracer ist ein anderer kostenloser Web-Service - ähnlicher Ansatz wie unserer, aber lädt deine Datei hoch. Dieses Tool sitzt im Convenience-first-Slot: öffne einen Tab, lege eine Datei ab, erhalte ein SVG, kein Upload, keine Installation.

Tipps für den saubersten Trace

• Starte mit dem höchstauflösenden PNG, das du hast. Der Tracer skaliert über 4000 px auf der langen Kante herunter, aber mit einer sauberen Quelle zu beginnen, schlägt mit einem JPEG oder einem 256 x 256 PNG zu beginnen.
• Für Logos, führe zuerst einen S/W-Trace durch, um die Silhouette zu inspizieren, dann wechsle zu Farbe und drehe die Palette nur hoch, wenn du Schattierung benötigst.
• Wenn das Ergebnis Flecken hat, erhöhe die Pfad-Vereinfachung um 2-3 Schritte, bevor du die Farbanzahl senkst. Flecken kommen normalerweise von JPEG-Rauschen, nicht von der Palette.
• Wenn Ecken zu abgerundet aussehen, senke den Ecken-Schwellenwert um 30-60. Typografie und Pixelkunst wollen normalerweise 30-60; weiche Illustrationen sind bei 100-150 glücklich.
• Öffne das heruntergeladene SVG in einem Texteditor oder in Inkscape, um zu überprüfen, ob die Pfadanzahl sinnvoll ist. Ein Logo, das auf 3000 Pfade traced, möchte wahrscheinlich mehr Vereinfachung.

Datenschutz und Leistung

Jedes Byte deines Bildes bleibt auf deinem Gerät. Die Datei wird mit der Standard-File-/Blob-API gelesen, in Pixeldaten über createImageBitmap und eine <canvas> dekodiert, dann an einen Web Worker übergeben, der den Tracer off dem Main-Thread ausführt. Nichts wird hochgeladen; der Netzwerk-Panel bleibt während des gesamten Vorgangs still. Auf einem typischen 2020er Laptop tracet ein 1500 x 1500 Bild in etwa 0,5-2 Sekunden im Farbmodus und einem Bruchteil davon im Schwarz-Weiß-Modus. Die 4000-px-Langkanten-Begrenzung hält den Worst Case gebunden; wenn du etwas Größeres tracen musst, skaliere es vorher separat herunter oder teile das Bild in Kacheln.