Posterisieren und Nachzeichnen: warum der Konverter ein schlechtes SVG geliefert hat
Die meisten Bild-zu-SVG-Werkzeuge posterisieren und zeichnen nach. Was das mit Verläufen, Kanten und Knotenzahlen macht, und wie eine Rekonstruktion arbeitet.
Öffnen Sie irgendein Werkzeug „PNG zu SVG“, laden Sie ein Logo mit einem weichen Verlauf hoch, und Sie bekommen Streifen. Laden Sie ein sauberes Icon hoch, und Sie bekommen mehr Knoten als ein U-Bahn-Netzplan. Die Werkzeuge unterscheiden sich in der Oberfläche, aber fast alle arbeiten darunter nach demselben Rezept: erst posterisieren, dann nachzeichnen.
Das Rezept
- Das Bild auf N Farben reduzieren, meist durch Gruppieren der Pixel.
- Für jede Farbe die zusammenhängenden Pixelflecken finden.
- Jeden Fleck mit einem Polygon umranden, dann das Polygon zu Kurven glätten.
- Alles stapeln und in die Datei schreiben.
Das ist schnell, leicht zu programmieren und exakt das, was die klassischen Tracer der 2000er-Jahre taten. Seine Schwächen liegen im Verfahren selbst, kein Regler beseitigt sie.
Schwäche 1: Verläufe werden zu Streifen
Ein Verlauf besteht aus Tausenden leicht verschiedener Farben. Sie in N Eimer zu sortieren ergibt N flächige Streifen mit harten Kanten dazwischen. Ein größeres N macht schmalere Streifen und mehr Pfade, aber nie einen Verlauf.
Schwäche 2: zwei Farben, zwei Kanten
Jede Farbe wird für sich nachgezeichnet, also entsteht die Grenze zwischen Rot und Blau zweimal: einmal von der roten, einmal von der blauen Seite. Die beiden Umrisse stimmen nie genau überein. Wo sie sich überlappen, sieht man eine dunkle Naht, wo sie sich verfehlen, scheint eine Haarlinie Hintergrund durch. Ein Schneideplotter schneidet beide Linien.
Schwäche 3: den Pixeln wird blind vertraut
JPEG-Blöcke, Antialiasing und Generator-Rauschen sind für einen Tracer gewöhnliche Pixel, also werden sie treu umrandet. Heraus kommen Treppenkanten, winzige Farbinseln und Tausende Knoten für eine Form, die ein Grafiker mit zwanzig zeichnen würde.
Wie eine Rekonstruktion stattdessen arbeitet
svgize beginnt am anderen Ende und fragt: Welcher Entwurf aus flächigen Füllungen, Verläufen und sauberen Kurven hätte diese Pixel ergeben, wenn man berücksichtigt, wie das Bild beschädigt wurde? Zuerst misst die Engine Unschärfe, JPEG-Qualität und Rauschen. Dann prüft sie Verlaufshypothesen an den Pixeln und behält die, die sie erklären. Sie ordnet jedes Pixel der Form zu, zu der es gehört, sodass die Grenze zwischen zwei Farben eine einzige Kurve ist, die beiden Seiten gehört. Diese Kurve passt sie auf den Bruchteil eines Pixels an, findet die Ecken und glättet die Stellen, an denen die Quelle selbst wellt.
Der Unterschied zeigt sich in drei Zahlen neben jedem Ergebnis: Pfade, Farben und Dateigröße. Ein sauberes Logo sind ein paar Pfade, ein paar Farben und ein paar Kilobyte.