JXL in SVG umwandeln

In kaum einem Land gibt es so viele eingetragene Vereine wie in Deutschland — Sportvereine, Musikvereine, Schützenvereine, Trachtengruppen, mit einem Wappen oder Emblem, das oft Jahrzehnte alt ist. Häufig liegt genau dieses Emblem nur noch als eingescanntes oder abfotografiertes Bild vor, mittlerweile vielleicht als JPEG-XL-Datei archiviert, weil jemand die Sammlung platzsparender machen wollte. Für den nächsten Druck auf Trikots, ein Banner oder eine neue Vereinshomepage reicht ein Pixelbild nicht mehr aus — gebraucht werden Pfade, die sich verlustfrei auf jede Größe skalieren lassen.

Genau dafür ist diese Umwandlung gedacht, und für fast nichts anderes. JPEG XL selbst wird in der Registry für Archivierung und Fotografie geführt, und die meisten Menschen, die hier landen, haben tatsächlich ein Foto vor sich. Ihnen sei gleich gesagt: Das wird nicht funktionieren, und der nächste Abschnitt erklärt, warum.

Eine SVG-Datei in Pixel zu rendern ist eindeutig: Die Datei sagt, welche Formen existieren, und ein Renderer zeichnet sie. Umgekehrt gibt es in einer JPEG-XL-Datei überhaupt keine Formen — sie ist ein Raster aus Farbwerten, und jede Kurve, jede Ecke, jede Kontur, die eine SVG-Datei bräuchte, muss dort erraten werden, wo sich die Farbe ändert.

Dieses Erraten ist das Nachzeichnen, und es ist der Grund, warum dieses Paar anders beschrieben wird als jedes andere auf der Website. Am Ergebnis ist nichts eine unmittelbare Übertragung der Eingabe. Es entsteht eine neue Zeichnung, die dem Original in einem Maß ähnelt, das vollständig davon abhängt, was das Original war — und genau darum geht es in den beiden folgenden Abschnitten.

Ein schlechtes Foto in einer großen Datei. Der Algorithmus sucht nach Bereichen ähnlicher Farbe und zieht um jeden davon eine Kontur, braucht also flächige Bereiche, um zu funktionieren. Ein Foto hat davon keine — es enthält in jede Richtung fließende Farbverläufe —, sodass der Algorithmus die flächigen Bereiche erfindet, indem er die Farben zusammenfasst. Sichtbar wird das als Posterisierung.

Das wurde vor der Umsetzung dieses Merkmals gemessen, nicht nachträglich vermutet: Eine Fotografie fiel etwa vier Mal so groß aus wie die Quelle und wirkte sichtbar posterisiert, ein Farbverlauf zeigte Bänder, aus demselben Grund — ein Verlauf ist genau die Abwesenheit der flächigen Bereiche, nach denen der Algorithmus sucht. Wer ein fotografiertes statt ein gezeichnetes Wappen konvertieren will, sollte diese Umwandlung nicht verwenden.

Flächige Grafik, und zwar besser, als die meisten erwarten. Ein Logo kommt originalgetreu zurück — im Test wurde aus einer 6-KB-Quelle eine 16-KB-SVG-Datei mit scharfen Kanten, korrekten Farben und erhaltenen abgerundeten Ecken, und das Ergebnis skaliert bis zur Plakatwand ohne Weichzeichnung. Icons, einfarbige Wappen, flache Illustrationen und eingescannte Strichzeichnungen fallen in dieselbe Kategorie.

Der gemeinsame Nenner ist, dass diese Bilder tatsächlich das enthalten, wonach der Algorithmus sucht: Flächen einer Farbe mit einer klaren Grenze dazwischen. Die entstehende SVG-Datei ist in Bytes größer als die Quelle und unendlich kleiner als eine Rasterdatei, die groß genug zum Drucken wäre — genau der Tausch, für den das Format gemacht ist. Das ist der Fall, für den diese Umwandlung gedacht ist, und der einzige, bei dem sie der erste Versuch sein sollte.

Ein Screenshot mit Text ergab in der Messung eine SVG-Datei rund vierzig Mal so groß wie die Quelle. Der Grund ist die Kantenglättung: Jeder Buchstabe wird mit einem Saum aus Zwischenfarben gezeichnet, und jeder dieser Säume wird zu einem eigenen kleinen Pfadhaufen. Bei einer ganzen Seite Text summiert sich das zu einer explodierenden Datei, die schlechter aussieht als die ersetzten Pixel.

Ist eine JPEG-XL-Datei überwiegend Schrift, lohnt sich zuerst die Frage, wozu der Text gebraucht wird. Zum Lesen oder Weiterverwenden ist Texterkennung das richtige Werkzeug und liefert Zeichen statt Formen. Soll das Erscheinungsbild einer Seite erhalten bleiben, hält ein Rasterformat es zu einem Bruchteil der Größe fest. Nachzeichnen von Schrift lässt sich nur bei einem Wortsignet vertreten — ein paar Buchstaben, die eher Grafik als Text sind — und dafür sind vier Farben und weiche Detailstufe der richtige Ausgangspunkt.

Die Farbanzahl legt fest, auf wie viele flächige Farben die Zeichnung reduziert wird, und ist die Einstellung, von der alles andere abhängt. Vier passt zu einem einfarbigen Wappen oder Signet und liefert die saubersten Formen bei der kleinsten Datei. Acht ist die Voreinstellung und passt zu den meisten flächigen Illustrationen. Sechzehn folgt Schattierungen genauer, zu einem echten Preis an Dateigröße, und zweiunddreißig kommt dem Original am nächsten, bei der mit Abstand größten Datei.

Der Instinkt ist, den Wert zu erhöhen, und ausgerechnet bei einem Foto verwandelt genau dieser Instinkt ein mittelmäßiges Ergebnis in ein unbrauchbares. Mehr Farben bei einem Foto bedeuten mehr erfundene Bereiche und mehr Pfade, die sie beschreiben, nicht mehr Realismus. Die Regel, die trägt: den Wert nur erhöhen, wenn im Original ein flächiger Bereich erkennbar ist, den die Nachzeichnung mit seinem Nachbarn verschmolzen hat. Verringern ist die häufiger nützliche Richtung — ein zweifarbiges Wappen, bei vier Farben nachgezeichnet, kommt oft mit einer dritten und vierten Farbe zurück, die aus nichts als der Kantenglättung zwischen den beiden anderen besteht, und eine Reduzierung auf zwei entfernt genau diese Umrissformen statt sie nur zu glätten.

Die Detaileinstellung bestimmt, wie eng die Pfade den Pixeln folgen. Weich akzeptiert eine lockere Passform und verwirft Formen unter sechzehn Pixeln, was die Krümel entfernt, die Kantenglättung an jedem Rand hinterlässt. Ausgeglichen ist die Voreinstellung und halbiert beide Schwellenwerte. Scharf folgt dem Pixelraster eng und behält Formen ab zwei Pixeln, Krümel eingeschlossen.

Das Bild vor dem Nachzeichnen zu weichzeichnen würde die Krümelzahl weiter senken und wird bewusst nicht getan, weil es genau die scharfen Kanten weichspült, die der einzige Grund sind, ein Wappen überhaupt nachzuzeichnen. Am besten mit Ausgeglichen starten. Zu Weich wechseln, wenn das Ergebnis von versprengten Bruchstücken um die Umrisse übersät ist, und zu Scharf nur, wenn ein echtes kleines Detail — eine Serife, eine dünne Linie, eine Kerbe in einem Wappen — verschluckt wurde.

Das Bild wird vor dem Nachzeichnen auf 1.600 Pixel an der längeren Seite herunterskaliert. Der Aufwand beim Nachzeichnen wächst mit der Anzahl der Kanten, nicht mit der Dateigröße, und eine große Fotografie hat fast überall eine Kante — unbegrenzt könnte eine Quelle mit zwölf Megapixeln eine mehrere Megabyte große SVG-Datei über mehrere zehn Sekunden hinweg erzeugen, ein schlechteres Ergebnis als das, was vermieden werden sollte.

Anders als bei einer Rasterumwandlung ist das kein Qualitätsverlust. Die Ausgabe ist auflösungsunabhängig, ein bei 1.600 Pixel nachgezeichnetes Wappen und dasselbe Wappen bei 4.000 Pixeln nachgezeichnet, rendern in jeder Größe identisch — was sich ändert, ist nur, wie eng die Pfade dem ursprünglichen Pixelraster folgen. Die Verkleinerung erfolgt mit dem gefilterten Skalierer des Browsers statt mit einer ungefilterten Methode, weil eine ungefilterte Verkleinerung jede Diagonale in eine Treppe verwandeln würde, die die Nachzeichnung anschließend originalgetreu übernähme.

Hier sagt nichts vorher, ob ein Bild gut nachzeichnet. Eine Faustregel über die Farbanzahl wäre eine Vermutung, und die tatsächliche Antwort liegt einen Moment später kostenlos vor: nachzeichnen, dann die beiden Byte-Zahlen vergleichen. Die Oberfläche zeigt beide an, sodass sich vor dem Herunterladen erkennen lässt, welches der beiden Ergebnisse eingetreten ist.

Das lohnt sich zur Gewohnheit zu machen. Eine SVG-Datei, die kleiner oder ähnlich groß wie die Quelle ist, bedeutet fast immer, dass die Nachzeichnung echte Formen gefunden hat. Eine mehrfach größere Datei bedeutet, dass sie welche erfunden hat, und die ehrliche Reaktion ist, das Ergebnis zu verwerfen statt an den Einstellungen zu drehen — keine Kombination aus Farben und Detailgrad macht aus einem Foto flächige Grafik, weil die flächige Grafik nie darin steckte.

Das ist der eigentliche Gewinn, wenn das Nachzeichnen gelingt. Eine JPEG-XL-Datei ist kein bearbeitbares Format: filtern, zuschneiden und neu kodieren geht, aber die Farbe des Wappens zu ändern nicht, weil es kein Wappen gibt, nur Pixel, die wie eines aussehen. Eine SVG-Datei ist eine Textdatei, die Formen beschreibt, und Illustrator, Inkscape und Figma öffnen sie alle als Objekte, die sich verschieben, umfärben und löschen lassen.

Der Grund, ein Wappen nachzuzeichnen, ist deshalb selten allein die Skalierbarkeit. Es geht darum, ein Motiv wiederzugewinnen, das nur noch als Bild existiert — ein altes Emblem von einem eingescannten Briefkopf, ein Icon, dessen Quelldatei niemand aufgehoben hat — als etwas, an dem sich wieder arbeiten lässt. Die Ausgabe ist zudem eine Textdatei und lässt sich wie jede andere Quelldatei in einer Versionsverwaltung führen, und ihre Füllfarben lassen sich per Suchen-und-Ersetzen anpassen, wenn sich eine Vereinsfarbe ändert. Existiert die ursprüngliche Vektordatei noch irgendwo, ist sie dem Nachzeichnen immer vorzuziehen, denn eine Nachzeichnung ist eine Annäherung, das Original nicht.