Welche Vektorisierungs-Engine sollten Sie verwenden? Ein Leitfaden zu allen vier SVGSnap-Modi
Trace, Sketch, Strokes oder Pixel: SVGSnap hat vier Vektorisierungs-Engines, jede optimiert für eine andere Art von Bild. Hier erfahren Sie, wie Sie die richtige auswählen.
Ein Freund schrieb mir letzte Woche mit einem Screenshot des Upload-Bildschirms und einer einzigen Frage: "Warum sind hier vier Buttons? Welchen soll ich denn nehmen?" Berechtigte Frage. Die Standardeinstellungen funktionieren meistens, aber falls Sie sich jemals gefragt haben, was die anderen drei machen, ist das hier der richtige Artikel.
SVGSnap bringt vier Vektorisierungs-Engines mit. Jede ist für eine andere Art von Bild entwickelt, und die falsche Wahl ist der häufigste Grund, warum eine Konvertierung schlechter aussieht als erwartet.
Warum vier Engines statt einer
Die erste Version dieser Website kam mit einem Tracer, vtracer. Er ist ausgezeichnet für Farbillustrationen, Logos und die meiste foto-basierte Kunst. Aber "die meiste" lässt viele Fälle außen vor.
Eine Bleistiftskizze, die als Farbbereich getraced wird, erzeugt zwei Umrisse für jede Linie, einen für jede Seite des Stiftstrichs, was die Dateigröße verdoppelt und wie Doppeltsehen aussieht, wenn man es neu einfärbt. Ein Pixel-Art-Sprite, der mit Kurven getraced wird, verliert den ganzen Sinn von Pixel-Art. Eine Unterschrift, die mit Bereichen getraced wird, wird zu einem fetten Klecks statt zu einem einzelnen editierbaren Strich. Verschiedene Probleme, verschiedene Mathematik.
Also wuchs der Worker. Heute gibt es vier Engines und jede ist um eine bestimmte Art von Bild herum gebaut.
Illustration: der Allzweck-Tracer
Das ist der Standard. Unter der Haube ist es vtracer, ein Rust-Bereichs-Tracer, der das Bild liest, benachbarte Pixel nach Farbe gruppiert und Bézier-Kurven um die Ränder jeder Gruppe zeichnet. Verwenden Sie ihn für alles mit Farbe: Logos, Icons, Illustrationen, Vektor-Porträts, Screenshots von UIs, getracte Fotos.
Die drei Einstellungen, die Sie anpassen können, sind Farbmodus, Detailgrad und Glättung.
Farbmodus kontrolliert die Palette. Vollfarbe erhält Verläufe (richtig für Illustrationen), erzeugt aber größere Dateien. Begrenzt oder Schwarz-Weiß erzwingt flache Formen, was Sie für Logos und Siebdruck wollen.
Detailgrad entscheidet, wie aggressiv der Tracer vereinfacht. Niedrig gibt Ihnen weniger Pfade und sauberere Kurven auf Kosten feiner Details. Hoch erhält jede Falte der Quelle, einschließlich Rauschen. Für ein flaches Logo senken Sie es. Für ein Aquarell erhöhen Sie es.
Glättung entspricht vtracers Eckenschwelle. Höhere Werte runden Ecken ab; niedrigere Werte behalten scharfe Winkel. Wenn Ihre geometrische Markierung nach der Konvertierung wie ein Ballontier aussieht, ist Ihre Glättung zu hoch.
Verwenden Sie die Illustration-Engine zuerst. Wenn das Ergebnis schlechter als die Quelle aussieht aus einem anderen Grund als 'zu wenige Farben', liegt das Problem wahrscheinlich daran, dass Sie eine völlig andere Engine verwenden sollten.
Sketch: schwarze Tinte auf weißem Papier
Hinter dem Sketch-Button steht potrace, derselbe Tracer, den Inkscape und hundert andere Tools seit zwei Jahrzehnten verwenden. Es ist die Referenzimplementierung für eine spezifische Eingabe: eine Schwarz-Weiß-Bitmap. Bleistift auf Papier. Tintenzeichnungen. Tattoo-Flash. Eine gescannte Unterschrift. Schattenpuppen. Alles, was sich auf dunkle Markierungen auf hellem Hintergrund reduzieren lässt.
Es übernimmt keine Farbe aus der Quelle, auch wenn welche vorhanden ist, weil das Erste, was es macht, ist, das Bild auf pures 1-Bit zu schwellen. Pixel dunkler als die Schwelle werden Vordergrund; alles andere wird Hintergrund. Der Tracer zeichnet dann saubere Bézier-Umrisse um die Vordergrund-Bereiche.
Die drei Regler sind Schwelle, Flecken und Glättung.
Schwelle ist die Linie zwischen "dieses Pixel ist Teil der Zeichnung" und "das ist Papier". Bewegen Sie sie nach oben, wenn der Scanner zu viel Papierkorn erfasst hat. Bewegen Sie sie nach unten, wenn helle Bleistiftstriche verschwinden.
Flecken ist potraces --turdsize (ja, wirklich). Es verwirft verbundene Bereiche kleiner als der Wert. Ein Fleck von 2 behält den Punkt auf jedem i; ein Fleck von 10 wird Ihre Satzzeichen fressen. Beginnen Sie bei 2 bis 4.
Glättung entspricht potraces alphamax, das kontrolliert, wie bereitwillig der Tracer Ecken rundet. Füller- und Bleistiftlinien sind leicht wackelig, auch wenn Sie sorgfältig zeichnen, und eine höhere Glättung verwandelt das Wackeln in saubere Kurven. Für ein getintetes Logo mit scharfen Winkeln senken Sie es.
Wenn Sie eine echte Skizze auf Papier haben und einen tieferen Durchgang wollen, habe ich einen separaten Artikel über die Vektorisierung von Bleistiftskizzen und gescannten Zeichnungen geschrieben, der abdeckt, wie man überhaupt gut scannt.
Strokes: editierbare Einlinien-Vektoren
Der dritte Button sagt Strokes. Intern ist es die Mittellinien-Engine, und sie macht etwas völlig anderes als die ersten beiden.
Trace und Sketch umreißen beide Linien. Wenn Sie eine 4-Pixel-breite schwarze Linie zeichnen und eine von ihnen laufen lassen, bekommen Sie einen Vektor mit zwei parallelen Pfaden, einen für jede Seite des Strichs, und eine Füllung dazwischen. Das Ergebnis sieht richtig aus, aber Sie können die Linie nicht "verdicken", weil es keine Linie zum Verdicken gibt. Es gibt nur ein dünnes gefülltes Rechteck.
Der Strokes-Modus skeletiert das Bild zuerst. Die 4-Pixel-breite Linie wird zu einer 1-Pixel-breiten Wirbelsäule, und die Engine zeichnet einen einzelnen SVG <path> mit Strich-Styling entlang dieser Wirbelsäule. Jetzt hat der Pfad ein echtes stroke-width-Attribut. Sie können es von 2 auf 8 in jedem Vektoreditor ändern und die Linie wird dicker. Sie können es neu einfärben, indem Sie das stroke-Attribut ändern. Sie können es als Aufzeichnungseffekt animieren.
Das ist die Engine, die Sie für handgezeichnete Kunst wollen, die Sie bearbeiten planen. Tattoo-Flash, das Sie in Illustrator neu einfärben werden. Eine Unterschrift, die Sie animieren wollen. Eine botanische Skizze, die in drei verschiedenen Strichstärken geliefert werden muss, ohne neu getraced zu werden.
Einstellungen sind Schwelle (gleiche Idee wie Sketch), Strichbreite und Strichfarbe. Die Ausgabe läuft auch durch Ramer-Douglas-Peucker-Vereinfachung, was eine schicke Art zu sagen ist "überflüssige Punkte fallen lassen". Wenn Ihre Striche hackelig aussehen, war die Vereinfachung zu aggressiv. Wenn sie verrauscht aussehen, war sie nicht aggressiv genug.
Pixel: 1:1-Vektor für Sprites und Icons
Die vierte Engine ist die meinungsstärkste. Sie existiert, weil Kurven-Tracing Pixel-Art zerstört.
Wenn Sie einen 32x32-Sprite mit vtracer tracen, mittelt der Tracer benachbarte Pixel ähnlicher Farbe, passt Kurven an das Ergebnis an, und die scharfen Pixelkanten werden zu weichen Bézier-Klecksen. Ihr Schwert-Icon sieht jetzt wie eine nasse Nudel aus.
Der Pixel-Modus geht den anderen Weg. Jede zusammenhängende Folge gleichfarbiger Pixel wird zu einem achsenausgerichteten <rect> mit shape-rendering="crispEdges". Zwei Durchgänge der Lauflängenkodierung (einer horizontal, einer vertikal) verschmelzen Läufe, die über Reihen identisch sind, damit Sie nicht mit einem Rechteck pro Pixel enden. Das Ergebnis ist ein echter Vektor. Jedes Pixel ist eine editierbare Form, und es skaliert, ohne den pixeligen Charakter zu verlieren, der es überhaupt erst zur Pixel-Art gemacht hat.
Es ist hart begrenzt auf 2048 Pixel pro Seite. Pixel-Art ist per Definition klein, und die Aufhebung der Begrenzung würde bedeuten, dass ein 4K-Screenshot zu einer 200MB SVG wird.
Die einzige Einstellung ist Palettengröße. Wenn Ihre Eingabe mehr einzigartige Farben hat als das Ziel (Standard 256), quantisiert die Engine sie mit Median-Cut herunter. Das ist es, was Ihnen erlaubt, ein digitales Gemälde einzugeben und eine saubere Pixel-Art-ähnliche Ausgabe statt eines Fehlers zu bekommen. Senken Sie es auf 16 oder 32 für klobige Retro-Game-Looks; behalten Sie es bei 256 für genaue Sprites.
Der Pixel-Modus lehnt übergroße Bilder absichtlich ab. Laden Sie einen 4000-Pixel-breiten Screenshot mit ausgewähltem Pixel hoch und Sie bekommen einen Fehler, der Ihnen sagt, stattdessen Illustration zu verwenden. Die Illustration-Engine ist das, was Sie für Screenshots wollen.
Wie man in 30 Sekunden auswählt
Wenn Sie nicht sicher sind, welche Engine Sie verwenden sollen, hier ist ein Entscheidungsbaum, den Sie in Ihrem Kopf durchlaufen können.
Hat die Quelle Farbe, die Sie behalten wollen? Verwenden Sie Illustration. Das trifft auf fast jedes Logo, jedes Icon, jede Illustration zu. Standard rein, dann Farbmodus und Detailgrad anpassen, wenn der erste Durchgang nicht richtig ist.
Ist die Quelle eine Schwarz-Weiß-Zeichnung auf Weiß? Sketch. Sauberere Ausgabe als Illustration bei derselben Eingabe, jedes Mal.
Ist es eine Strichzeichnung, die Sie bearbeiten, neu einfärben oder deren Striche Sie animieren wollen? Strokes. Die Ausgabe gibt Ihnen echte Pfade mit Strich-Attributen, die Sie in Illustrator, Figma oder direkt in der SVG-Datei ändern können.
Ist es Pixel-Art, ein kleiner Sprite oder ein Icon unter 256x256? Pixel. Alles andere mit dieser Engine wird falsch aussehen oder die Größengrenze erreichen.
Meistens ist die Antwort Illustration. Die anderen drei existieren für die Fälle, wo Illustration technisch ein Tracer ist, aber nicht der richtige Tracer.
Fehler, die ich Leute machen gesehen habe
Sketch auf einem farbigen Logo laufen lassen. Der Schwellenschritt wirft die Farbe weg. Sie bekommen eine schwarze Silhouette Ihres Logos und fragen sich, wo die Markenfarbe hingegangen ist. Lassen Sie Illustration auf einem farbigen Logo laufen. Sketch ist nur für Schwarz-Weiß-Quellen.
Pixel auf einem Foto laufen lassen. Entweder die Größengrenze lehnt es ab (gut) oder die Paletten-Quantisierung läuft und gibt Ihnen eine posterisierte Version, die das sein mag oder nicht, was Sie wollten. Wenn Sie einen echten Vektor eines Fotos wollen, verwenden Sie Illustration mit hohem Detail. Wenn Sie den posterisierten Look absichtlich wollen, dafür ist die Pixel-Quantisierung da.
Illustration auf einer handgezeichneten Skizze laufen lassen. Sie bekommen ein brauchbares Ergebnis. Sie bekommen auch doppelt umrissene Linien, Papierkorn-Rauschen in Formen gebacken und eine Datei doppelt so groß wie nötig. Sketch behandelt diese Eingabe in einem Durchgang.
Erwarten, dass Strokes gefüllte Bereiche behandelt. Der Skeletierungsschritt nimmt dünne Linien an. Geben Sie ihm ein solides schwarzes Quadrat und es skeletiert zu einem einzelnen Punkt in der Mitte. Verwenden Sie Strokes für Strichkunst, nicht für Füllungen.
Die richtige Engine ist die, die zu dem passt, was Sie gezeichnet haben, nicht die mit den meisten Einstellungen.
— SVGSnap Team
Wenn Sie kombinieren wollen
Ein Workflow, der erwähnenswert ist: wenn Ihre Quelle eine niedrig aufgelöste Skizze oder ein Icon ist, lassen Sie es zuerst durch den Bild-Upscaler bei 2x oder 4x laufen, dann konvertieren. Jede Engine funktioniert besser mit mehr Pixeln zum Lesen. Ich habe gesehen, wie derselbe Scan von "kaum brauchbar" zu "perfekt" mit einem Upscale-Schritt dazwischen ging.
Sie können auch den Hintergrund entfernen vor der Konvertierung, wenn Ihre Quelle Rauschen, einen farbigen Hintergrund oder Papiertextur hat. Sauberere Eingabe gibt Ihnen einen saubereren Vektor, unabhängig davon, welche Engine Sie wählen.
Wenn Sie einen genaueren Blick auf einen spezifischen Anwendungsfall wollen, gibt es Durchgänge für die Vektorisierung von Logos für Druck und Merch und für die Vektorisierung gescannter Zeichnungen, die tief in die Einstellungsseite gehen.
Der Konverter selbst ist auf svgsnap.com. Der Engine-Selektor ist die Reihe von vier Buttons unter der Dateivorschau. Wählen Sie einen, drücken Sie konvertieren, schauen Sie, wie es aussieht. Wenn die Ausgabe falsch ist, ändern Sie die Engine, nicht die Einstellungen. Das ist normalerweise die schnellere Lösung.