PNG in SVG mit Verläufen: warum Sie Streifen bekommen und wie der Verlauf erhalten bleibt

Ein Verlauf im PNG sind Tausende Farben. Die meisten Konverter bündeln sie zu Streifen. Wie stattdessen ein echter SVG-Verlauf wiederhergestellt wird, welche Verläufe sich retten lassen, und was für Druck und Plotter gilt.

Laden Sie ein Logo mit einer weichen Füllung von Blau nach Violett in ein typisches PNG-zu-SVG-Werkzeug, und Sie bekommen einen Stapel flächiger Streifen mit harten Kanten dazwischen. Erhöhen Sie die Farbzahl, werden die Streifen schmaler und zahlreicher. Ein Verlauf werden sie nie, weil das Werkzeug keine Ahnung hat, dass es gerade einen Verlauf ansieht.

Warum Streifen entstehen

Ein Verlauf in einer Bitmap ist ein weicher Lauf aus Tausenden leicht verschiedener Farben. Ein Konverter, der posterisiert und nachzeichnet, reduziert das Bild zuerst auf N Farben, was den Lauf in N Bänder zerschneidet, und zeichnet dann jedes Band als eigene Form nach. Das SVG ist technisch skalierbar, aber der Entwurf wurde durch eine Höhenlinienkarte ersetzt. Jedes zusätzliche Band ist außerdem ein weiterer Pfad, eine weitere Grenze, an der eine Haarlinie erscheinen kann, und ein weiteres Ding, das im Editor aufzuräumen ist.

Was ein echter SVG-Verlauf ist

SVG kennt die Elemente linearGradient und radialGradient: eine Richtung oder ein Zentrum, ein paar Farbstopps, und der Renderer füllt die Form in jeder Größe weich aus. Eine Form, eine Füllung, ein paar Byte. So hätte der Grafiker es gezeichnet, und so wollen Sie es in der Datei: bearbeitbar in Figma oder Illustrator und weich auf dem 4K-Bildschirm wie auf dem Poster.

Wie svgize ihn wiederherstellt

Die Engine behandelt einen Verlauf als Hypothese. Für jede Region prüft sie, ob eine flächige Farbe, ein linearer, ein radialer oder ein elliptischer Verlauf die Pixel am besten erklärt, gemessen am ermittelten Rauschen und an der Kompression der Quelle. Gewinnt ein Verlauf, wird er als Verlaufselement mit seinen Stopps geschrieben. Gewinnt eine flächige Farbe, bekommen Sie eine flächige Farbe. Nichts wird grundsätzlich in Bänder zerlegt; die Pixel entscheiden.

  • Lineare Verläufe in jeder Richtung, auch schräge.
  • Radiale und elliptische Verläufe, für Leuchteffekte, Buttons und kugelförmige Glanzlichter.
  • Verläufe in einer Form, die zugleich einen scharfen Umriss hat: Die Kante wird mit dem Nachbarn geteilt, die Füllung ist ein Verlauf.

Was sich nicht wiederherstellen lässt

Ein Verlauf mit mehreren Farbumkehrungen, ein Gitterverlauf oder eine weiche fotografische Schattierung hat kein einzelnes SVG-Element, das ihn beschreibt. Dafür weicht die Engine im Modus Illustration auf weiche Tonwertschichten aus: Es sieht richtig aus, es skaliert, aber es ist ein Stapel Formen, keine einzelne Füllung. Kommt es beim späteren Bearbeiten auf den Verlauf an, bitten Sie den Grafiker oder den Generator um eine einfachere Version mit zwei Stopps.

Druck, Plotter und Stickerei

Digitaldruck und Bildschirme verarbeiten SVG-Verläufe direkt. Folienschnitt, Lasergravur und Stickerei nicht: Ein Verlauf lässt sich weder schneiden noch sticken. Wandeln Sie dafür eine Version des Entwurfs in flächigen Farben um, oder setzen Sie in svgize ein Farblimit, damit der Verlauf gezielt auf ein paar flächige Stufen reduziert wird, die die Maschine verarbeiten kann. Der Siebdruck liegt dazwischen; ein paar flächige Stufen drucken auf Stoff meist besser als ein echter Verlauf.

Ein Logo mit Verläufen umwandeln

Das Ergebnis prüfen

Öffnen Sie das SVG in einem Texteditor und suchen Sie nach „Gradient“. Ist die Füllung ein Element mit zwei oder drei Stopps, hat der Verlauf überlebt. Sehen Sie stattdessen Dutzende Pfade mit leicht verschiedenen Hex-Farben, haben Sie Streifen. Die Pfad- und Farbzahlen neben jedem svgize-Ergebnis sagen Ihnen dasselbe schon vor dem Herunterladen.