PNG in SVG umwandeln: Logos, Icons und Strichzeichnungen

Ein PNG ist ein Rasterbild: ein festes Gitter aus Pixeln, jedes mit einer Farbe und optional einem Deckkraftwert. Ein Logo mit 500 × 500 px enthält genau 250.000 dieser Quadrate und sonst nichts. Wenn Sie es auf Postergröße vergrößern, wird jedes Quadrat nur größer oder die Übergänge werden unscharf. Ein SVG ist ein Vektorbild, eine Textdatei, die Formen wie <path>, <circle> und <rect> mit Koordinaten und Füllfarben auflistet. Ein Browser oder eine Schneidemaschine zeichnet diese Formen in jeder benötigten Größe neu. Deshalb bleibt ein Vektorlogo auf dem Smartphone und auf einem Messebanner gleichermaßen scharf.

Von Vektor zu Raster ist es einfach, denn der Renderer malt die Formen schlicht in Pixel; SVG in PNG erledigt das in einer Sekunde. In die Gegenrichtung gibt es keine verlustfreie Abkürzung, denn das Pixelgitter enthält keine Angaben zu den Formen, aus denen es entstanden ist. Etwas muss die Pixel ansehen und erraten, wo jede Form beginnt und endet. Dieser Schritt heißt Nachzeichnen oder Vektorisieren, und jeder seriöse PNG-in-SVG-Konverter, von Illustrator bis zum Kommandozeilenprogramm, ist im Kern ein Tracer.

Manche Konverter überspringen den schwierigen Teil. Sie schreiben eine gültige SVG-Datei mit einem einzigen <image>-Element, in dem das Original-PNG als Base64-Text eingebettet ist. Das macht die Datei außerdem etwa ein Drittel größer als das PNG. Das Ergebnis öffnet sich als SVG und besteht eine Dateityp-Prüfung, bleibt aber ein Pixelbild in einer Vektorhülle: Beim Zoomen sehen Sie dieselben gezackten Kanten, und eine Schneidemaschine findet keine Pfade. Öffnen Sie ein beliebiges SVG in einem Texteditor und suchen Sie nach data:image/png; ist die Zeichenfolge vorhanden, wurde nichts vektorisiert.

Nachzeichnen lohnt sich bei Bildern, die von Anfang an aus Formen aufgebaut wurden. Ein aus einer Design-App exportiertes Logo, ein flaches Icon, ein Cartoon mit schwarzen Konturen, eine eingescannte Unterschrift oder eine Schablone bestehen aus wenigen Vollfarben, getrennt durch klare Kanten. Der Tracer fasst jede Farbe zu Flächen zusammen, folgt deren Rändern und legt glatte Kurven darüber, sodass das SVG den ursprünglich gezeichneten Formen nahekommt. Fette Schriftzüge in einer Wortmarke funktionieren ebenfalls gut, denn ein großer Buchstabe ist nur eine weitere gefüllte Form. Jedes Zeichen wird zu einer Kontur, die Sie umfärben oder skalieren, aber nicht mehr als Text bearbeiten können.

Fotos sind der umgekehrte Fall. Ein Porträt oder Produktfoto hat Tausende leicht unterschiedlicher Töne, die ineinander übergehen, und ein Vektorformat kann das nicht effizient beschreiben. Bitten Sie einen Tracer um 16 Farben, erhalten Sie eine posterisierte Illustration mit sichtbaren Stufen; bei 64 erhalten Sie zehntausende winzige Formen in einer Datei, die viel größer ist als das PNG und trotzdem nicht wie ein Foto aussieht. Weiche Verläufe, Schlagschatten und Leuchteffekte werden auf gleiche Weise zu Stapeln dünner Streifen. Kleiner Text ist die dritte Schwachstelle: Bei 10–12 px verschmilzt die Kantenglättung jeden Buchstaben mit dem Hintergrund, und der Tracer kann ein „e“ nicht von einem „o“ unterscheiden.

Die Auflösung ist wichtiger als jede Einstellung. Der Tracer passt jede Kurve an die Pixeltreppe entlang einer Kante an, und je feiner die Treppe, desto genauer die Kurve. Wenn Sie das PNG selbst aus Figma, Canva, Photoshop oder einer Präsentation exportiert haben, exportieren Sie es erneut in der zwei- bis dreifachen Anzeigegröße; ein Logo mit 1500–2000 px Breite gibt dem Tracer reichlich Material. Skalieren Sie ein kleines PNG nicht vorab mit einem KI-Vergrößerer hoch, außer das Ergebnis sieht bei 100 % Zoom sauber aus, denn erfundene Kantenstruktur wird genauso getreu nachgezeichnet wie echte Kanten.

Machen Sie als Nächstes den Hintergrund einfach. PNG unterstützt volle Transparenz, und ein transparenter Hintergrund ist der einfachste Fall: Jedes vollständig transparente Pixel gilt als leerer Raum, sodass das SVG kein weißes Kästchen hinter dem Motiv hat. Hat das PNG einen einfarbigen Hintergrund, schneiden Sie zuerst eng um das Motiv zu; unsere Anleitung Bild auf ein Seitenverhältnis zuschneiden erklärt den exakten Ausschnitt. Ein unruhiger Hintergrund, etwa ein auf ein T-Shirt fotografiertes Logo, sollte vor dem Nachzeichnen entfernt oder mit einer einzigen Farbe übermalt werden.

Reduzieren Sie schließlich die Farbanzahl, bevor der Tracer es für Sie tut. Blenden Sie Schatten, Leuchteffekte und Verlaufsüberlagerungen in der Quelldatei aus und ersetzen Sie eine Verlaufsfüllung durch ihre mittlere Farbe, falls die Vektorversion sie nicht braucht. Zählen Sie die verbleibenden Vollfarben einschließlich der Konturfarbe und notieren Sie die Zahl; es ist die nützlichste Zahl, die Sie im nächsten Schritt eingeben. Wenn Sie zwischen einem JPEG und einem PNG desselben Logos wählen, nehmen Sie das PNG, denn die JPEG-Komprimierung erzeugt Rauschen an jeder Kante, wie in JPG vs. JPEG vs. PNG erklärt.

Jeder Tracer stellt dieselben drei Fragen, auch wenn die Bezeichnungen abweichen. Die erste lautet, wie viele Farben erhalten bleiben. Im PNG-in-SVG-Konverter wählen Sie mit Farbmodus zwischen Farbe, Graustufen und Schwarzweiß, und Anzahl der Farben legt fest, in wie viele Gruppen die Pixel sortiert werden, von 2 bis 64. Richten Sie den Wert nach der notierten Zahl. Ist er zu hoch, teilt der Tracer geglättete Randpixel in eigene dünne Farben auf, was als schwacher Saum um jede Form sichtbar wird; ist er zu niedrig, verschmelzen zwei Markenfarben zu einer.

Die zweite Frage betrifft den Umgang mit Kanten. Glättung rundet die Treppenstufen der Pixel ab, und Detailgrad bestimmt, wie klein ein Fleck sein darf, um noch eine Form zu werden. Die PNG-Seite startet mit Detailgrad 70 und Glättung 40, was bei einem sauberen Export kleine Ecken erhält. Senken Sie Detailgrad, wenn Staub und vereinzelte Punkte auftauchen, erhöhen Sie Glättung, wenn Kurven wackelig wirken, und stellen Sie Kurven auf Gerade Linien für geometrische Logos aus geraden Kanten oder auf Pixelkanten für Pixelart, die blockig bleiben soll.

Die dritte Frage gilt nur für das Schwarzweiß-Nachzeichnen: wo die Grenze zwischen Tinte und Papier liegt. Schwellenwert reicht von 1 bis 254, Standard ist 128. Pixel, die dunkler sind als der Schwellenwert, werden schwarz, hellere bleiben leer. Bei einer Unterschrift mit dünnem blauem Kugelschreiber erhöhen Sie ihn auf 160–180, damit schwache Striche erhalten bleiben; bei einer kräftigen Filzstiftzeichnung auf leicht grauem Papier senken Sie ihn auf etwa 100, damit die Papierstruktur nicht zu Flecken wird. Ändern Sie jeweils nur eine Einstellung und vergleichen Sie, denn die Effekte beeinflussen sich gegenseitig.

Bleiben Sie nicht bei der Vorschau stehen. Öffnen Sie das SVG im Browser und zoomen Sie auf 400–800 % an die engste Kurve, etwa die Rundung eines Buchstabens oder eine Spitze. Eine gute Nachzeichnung zeigt glatte Bögen und scharfe Ecken dort, wo das Motiv Ecken hat; eine schwache zeigt Wackler, Dellen und abgerundete Spitzen. Betrachten Sie die Datei dann in einem Vektoreditor wie Inkscape, Illustrator oder Figma und aktivieren Sie die Umriss- oder Knotenansicht. Ein einfaches zweifarbiges Logo braucht typischerweise einige hundert Knoten; zeigt Ihres mehrere tausend, ist der Tracer dem Rauschen gefolgt, und die Pfade lassen sich nur mühsam bearbeiten oder schneiden.

Die Dateigröße ist ein schneller Plausibilitätstest. Ein optimiertes SVG eines flachen Logos hat typischerweise ein paar Kilobyte bis einige zehn Kilobyte und ist oft kleiner als das PNG, aus dem es entstand. Eine nachgezeichnete Datei, die mehrfach größer ist als das Quell-PNG, bedeutet meist zu viele Farben, zu viel Detail oder ein Foto, das man nicht hätte nachzeichnen sollen. Lassen Sie SVG optimieren eingeschaltet, da es Koordinaten rundet und Pfade ohne sichtbare Änderung zusammenführt. Skalieren Sie das Motiv zum Schluss auf Postergröße und auf Favicon-Größe, um sicherzugehen, dass es in beiden gut lesbar ist.

Die kostenlose Desktop-Option ist Inkscape. Importieren Sie das PNG, wählen Sie es aus und öffnen Sie Pfad > Bitmap nachzeichnen (Umschalt+Alt+B). Einfach-Scan-Modi wie Helligkeitsgrenze erzeugen einen schwarzen Pfad, was für Strichzeichnungen passt; Mehrfach-Scan-Modi zeichnen eine festgelegte Zahl von Farben oder Grautönen als gestapelte Ebenen nach. Das Schwarzweiß-Nachzeichnen von Inkscape basiert auf Potrace, einer Tracing-Bibliothek, die Peter Selinger 2001 veröffentlichte. Potrace selbst ist ein Kommandozeilenprogramm, das PBM, PGM, PPM oder BMP statt PNG liest, nur zweifarbige Bilder verarbeitet und SVG, PDF, EPS oder DXF schreibt, was es zu einer guten Wahl für Skripte mit großen Scan-Stapeln macht.

In Adobe Illustrator ersetzte Bildnachzeichner in Illustrator CS6 das ältere Interaktive Nachzeichnen. Platzieren Sie das PNG, öffnen Sie Fenster > Bildnachzeichner und starten Sie mit einer Vorgabe wie Schwarzweiß-Logo, 3 Farben oder 16 Farben. Passen Sie dann Pfade, Ecken und Rauschen im erweiterten Bereich an. Die Nachzeichnung bleibt aktiv, bis Sie auf Umwandeln klicken, wodurch sie zu normalen bearbeitbaren Pfaden wird. Wenn Sie keines der beiden Programme installiert haben, durchläuft ein Browser-Konverter denselben Prozess aus Farbreduktion, Kantenerkennung und Kurvenanpassung; der Bild-in-SVG-Konverter akzeptiert auch JPG, WebP und HEIC und kann statt SVG auch EPS, PDF oder DXF schreiben.

Im Web ist SVG seit 2001 eine W3C-Empfehlung, und jeder aktuelle Browser stellt es in einem <img>-Tag, als CSS-Hintergrund oder inline im HTML dar, wo sich seine Farben sogar beim Hovern ändern können. Ein nachgezeichnetes Logo ersetzt meist mehrere PNG-Größen für Retina-Displays durch eine einzige kleine Datei. Bei Schneideplottern ist SVG das Format, das Cricut Design Space und Silhouette Studio erwarten: Jede nachgezeichnete Form wird zu einem Schneidepfad, und eine mehrfarbige Nachzeichnung kommt als getrennte Ebenen an, die Sie aus verschiedenfarbiger Folie schneiden können. Laserschneider und CNC-Software bevorzugen meist DXF, das PNG in DXF mit denselben Nachzeichnungseinstellungen erzeugt.

Druckereien verlangen Vektorgrafiken, weil eine Druckmaschine, ein Stick-Digitizer oder ein Schildschneider Kanten statt Pixel braucht, und ein nachgezeichnetes SVG genügt dafür bei Aufklebern, T-Shirts oder einem Banner oft. Es bleibt aber eine Annäherung: Die Kurven sind geschätzt, die Farben aus Pixeln gemittelt, und Text liegt als Kontur vor. Fragen Sie daher vor dem Nachzeichnen eines Firmenlogos bei dem nach, der es erstellt hat. Eine Designerin oder Agentur hat fast immer das Original als AI, EPS, PDF oder SVG mit exakten Kurven, benannten Farben und Schriften, und das Senden dauert eine Minute. Nachzeichnen ist das richtige Werkzeug, wenn dieses Original verloren ist, das Logo nur auf einem gescannten Briefkopf überlebt hat oder das Motiv Ihre eigene Zeichnung ist.