PNG in SVG umwandeln

Der klassische Fall: Ein Handwerksbetrieb braucht sein Logo für eine Fahrzeugbeschriftung oder eine Vereinsfahne braucht ihr Wappen für einen Fahnendruck, und alles, was noch existiert, ist ein PNG von der alten Webseite oder aus einem WhatsApp-Anhang. Die Originaldatei liegt auf einem Rechner, an den niemand mehr herankommt, oder bei einer Agentur, die nicht mehr antwortet.

Ein Schilder- oder Beschriftungsbetrieb kann mit einem PNG wenig anfangen — Plotter und Fräsen brauchen Pfade, keine Bildpunkte. Genau dafür ist Nachzeichnen gedacht: nicht als Ersatz für die verlorene Datei, sondern als der Weg, mit dem vorhandenen Bild wieder Formen zu bekommen.

Ein PNG enthält keine Formen, nur ein Raster aus Farbwerten. Der Tracer sucht die Kanten zwischen flachen Farbflächen und zeichnet Umrisse um sie herum — eine Rekonstruktion, keine Wiederherstellung. Ein sauberer, flacher Export aus einem Zeichenprogramm ist dabei die beste Eingabe, die dieser Prozess überhaupt bekommt, weil im PNG nichts verwischt wurde, das nicht schon so gemeint war.

Gemessen an einem eigenen Beispiel: eine flache Grafik mit 480 mal 320 Pixeln, 7.136 Byte als PNG, wurde bei der Voreinstellung von acht Farben zu 2.481 Byte SVG in fünf Pfaden. Fünf Pfade ist die Zahl, auf die es ankommt — kommt eine flache Zeichnung mit fünf, zwölf oder dreißig Pfaden zurück, hat es funktioniert.

Fast jedes PNG, das hier ankommt, stammt aus etwas anderem. Die Figma-Datei, das Sketch-Dokument, das Illustrator-Artboard oder der Canva-Entwurf, aus dem es exportiert wurde, ist eine echte Vektorquelle und keine Rekonstruktion — und exportiert selbst ein SVG, mit echten Kurven, echtem Text und benannten Ebenen.

Fünf Minuten Suche lohnen sich, weil der Unterschied dauerhaft ist. Ein nachgezeichnetes Logo hat Umrisse, wo das Original Buchstaben hatte, und der Schriftzug lässt sich nie wieder in der Hausschrift neu setzen. Nachzeichnen ist der zweitbeste Weg — richtig, wenn das Konto geschlossen, die Agentur weg oder der Rechner mit der Originaldatei längst entsorgt ist, aber eben der zweitbeste.

Der Tracer liest alle vier Kanäle, ein freigestelltes Logo auf durchsichtigem Grund kommt also nicht auf einem weißen Quadrat zurück. Die Bereiche, die durchsichtig waren, werden als Pfade mit einer Deckkraft von null geschrieben, und das sichtbare Motiv liegt darüber — das verhält sich beim Ablegen auf einer farbigen Seite genau wie das PNG.

SVG hat keinen Alphakanal, sondern nur Formen mit Deckkraft, und ein Rechteck mit Deckkraft null über der ganzen Fläche ist das, was aus einem durchsichtigen Hintergrund wird. Weiche Übergänge — ein Schlagschatten, eine 40-prozentige Überlagerung — werden dabei in einzelne Deckkraftstufen zerlegt statt in einen glatten Verlauf, was bei einem weichen Schatten sichtbar Streifen erzeugt.

Screenshots sind die häufigsten PNGs überhaupt und die am wenigsten geeigneten zum Nachzeichnen. Kantengeglätteter Text besteht aus vielen leicht unterschiedlichen Grautönen an jedem Buchstaben, und jeder dieser Farbcluster wird zu einer eigenen kleinen Form — ein Absatz wird zu Tausenden Pfaden, die zusammen einen leicht falschen Text ergeben.

Die eigene Messung ist eindeutig: Ein 2.608 Byte großer Screenshot wurde zu 166.255 Byte SVG in 871 Pfaden — vierundsechzigmal so groß, bei schlechterer Lesbarkeit als das Original. Ging es um den Text darin, liest die PNG-zu-TXT-Umwandlung ihn mit Texterkennung; ging es um ein scharfes Bild der Oberfläche, ist das PNG dafür bereits die kleinere und bessere Wahl.

Vier für ein einfarbiges Zeichen oder ein zweifarbiges Logo, acht für eine flache Illustration mit ein paar Füllungen, sechzehn bei echter Schattierung, zweiunddreißig nur, wenn bei sechzehn sichtbar etwas fehlt. Acht ist die Voreinstellung und für Material aus einem Zeichenprogramm meist der richtige erste Versuch.

Die Einstellung verhält sich nicht wie ein Qualitätsregler, wie das eigene Beispiel zeigt: 3.900 Byte bei vier Farben, 2.481 bei acht, 10.263 bei sechzehn und 10.168 bei zweiunddreißig. Mehr Farben ergaben an einer Stelle eine kleinere Datei und an der nächsten einen vierfachen Sprung, weil der Quantisierer bei jeder Einstellung eine neue Palette wählt. Zwei Einstellungen auszuprobieren dauert fünfzehn Sekunden und ist zuverlässiger als jede Überlegung dazu.

Jedes Zeichenprogramm glättet beim Export, also hat selbst ein hartkantiges Logo einen ein- bis zwei Pixel breiten Übergangsbereich an jeder Kante. Diese Übergänge sind die Splitter, die eine Nachzeichnung hinterlässt, und der Detailgrad entscheidet, ob sie überleben: glatt verwirft alles unter sechzehn Pixeln und rundet großzügig, scharf hält Formen bis zu zwei Pixeln und folgt dem Raster genau, ausgewogen liegt dazwischen und ist voreingestellt.

Bei einem Logo ist glatt meist die richtige Wahl. Scharf lohnt sich bei technischen Zeichnungen oder pixelgenauen Symbolen, wo eine einzelne Pixellinie bedeutungsvoll ist. Vorher weichgezeichnet wird nie — der Weichzeichnungsradius steht fest auf null, weil ein vorheriges Weichzeichnen genau die harten Kanten verschluckt, die überhaupt der Grund fürs Nachzeichnen waren.

Alles über 1.600 Pixel an der längsten Kante wird vor dem Nachzeichnen verkleinert. Das ist eine Grenze bei der Rechenzeit, keine bei der Qualität — der Aufwand steigt mit der Kantenzahl, nicht mit der Auflösung, und das Ergebnis unterscheidet sich zwischen 1.600 und 4.000 Pixeln nicht, weil ein Vektor bei jeder Größe gleich scharf gerendert wird.

Nach unten zählt jeder Pixel. Ein 200-Pixel-Favicon-Export hat an jeder Kurve zu wenige Stützpunkte, sodass Ecken sichtbar abrunden — keine Einstellung holt das nach. Existiert noch irgendetwas, das die Grafik erneut exportieren kann, lohnt sich eine Version um 1.600 Pixel Breite; ein @2x- oder @3x-Asset aus einem alten Build-Ordner ist oft die beste verfügbare Quelle.

Was zurückkommt, ist ein Stapel gefüllter Pfade mit einheitlichen Konturen. Keine Gruppen, keine Ebenennamen, keine Textelemente, keine Verläufe. Ein Schriftzug wird zu Buchstabenumrissen statt zu Buchstaben, ein Kreis zu einer Folge angepasster Kurvensegmente statt zu einem Kreis, ein Verlauf zu Farbstufen.

Für die meisten Anwendungsfälle dieser Seite reicht das völlig — der Weg führt zu einer Fräse, einem Großdruck oder einem Platzhalter, der nicht länger unscharf sein soll. Als Ersatz für die verlorene Markendatei taugt es nicht: Geht das Zeichen in ein Corporate-Design-System zurück, ist die Nachzeichnung eher eine Vorlage zum Neuzeichnen als das wiedergewonnene Original.

Bei einem Foto hilft kein Tracer, dafür ist PNG zu JPG oder PNG zu AVIF der Weg, den die Situation tatsächlich verlangt. Bei einem Screenshot, dessen Ziel eine kleinere Datei ist, liegt PNG für flache Oberflächenfarben ohnehin schon nah am Optimum.

Braucht es ein Favicon, ist PNG zu ICO das Paar, das die Datei erzeugt, die ein Browser tatsächlich abfragt — ganz ohne den Umweg über einen Vektor. Und geht es um eine druckfertige Datei fester Größe, übergibt PNG zu PDF oder PNG zu TIFF der Druckerei etwas, das ohne Neuzeichnen akzeptiert wird. Nachzeichnen lohnt sich, wenn die Grafik wirklich skalieren oder geschnitten werden muss, sonst nicht.

Was direkt aus dem Tracer kommt, ist funktional, aber nicht aufgeräumt: die unsichtbare Hintergrundfläche liegt noch im Dokument, Pfade tragen keine sprechenden Namen, und benachbarte Formen derselben Farbe sind nicht zusammengefasst. Für eine Fräse oder einen Plotter spielt das keine Rolle, für die Weiterarbeit in Inkscape oder Illustrator schon.

Der übliche zweite Schritt: die Hintergrundfläche löschen, benachbarte Pfade gleicher Farbe per „Pfade vereinigen" zusammenfassen, und die Datei anschließend durch ein Werkzeug wie SVGO laufen lassen, das überflüssige Präzisionsstellen und Kommentare entfernt. Bei der gemessenen Beispieldatei bringt allein das oft noch einmal zehn bis zwanzig Prozent weniger Bytes, ohne dass sich am Bild etwas ändert.

Dekodieren, Skalieren und Nachzeichnen laufen alle im Browser. Nichts wird hochgeladen, es gibt kein Konto und kein tägliches Limit — was besonders hier zählt, weil das gesuchte Motiv fast immer ein Logo ist, das jemandem gehört und lieber nicht auf einem fremden Server landet.

Der Tracer ist imagetracerjs, 46 Kilobyte reines JavaScript unter der Unlicense. Er ist nicht der leistungsfähigste verfügbare — potrace und autotrace fitten sauberere Kurven, sind aber GPL-lizenziert, und VTracer ist besser als beide, doch seine einzige Browser-Verpackung nennt keine Lizenz, was hier als gesperrt und nicht als freizügig gilt. Bei flachen Exporten, für die diese Seite gedacht ist, ist der Unterschied klein genug, dass die Lizenzfrage ihn entschieden hat.