WebP in SVG umwandeln

Ein wiederkehrender Fall bei deutschen Vereinen: Feuerwehr, Sportverein, Schützenverein — irgendwann wurde ein Wappen oder Emblem entworfen, die Ausgangsdatei liegt bei einer Person, die nicht mehr im Vorstand ist, oder ist mit einem alten Rechner verschwunden. Übrig bleibt das, was die Website noch zeigt, und das ist ein WebP, weil die Bildoptimierung beim letzten Website-Umbau automatisch dorthin konvertiert hat.

Gebraucht wird das Wappen aber als Vektor: für einen Wimpel, für die Titelseite der Satzung, für einen Stickaufnäher an der Vereinskleidung oder für einen Banner beim Sommerfest. Alle vier Anwendungen verlangen Kanten, die bei jeder Größe scharf bleiben, und dafür ist Nachzeichnen der einzige Weg, wenn nichts anderes mehr existiert.

Drei Stellen sind schnell geprüft und ersparen unter Umständen die ganze Übung. Die Adresse /favicon.svg direkt auf der Domain, der Seitenquelltext durchsucht nach „.svg", oder ein Blick, ob dasselbe Wappen an anderer Stelle als PNG eingebunden ist. Viele Vereins-Websites, die von einer Baukasten-Plattform stammen, führen das Original irgendwo intern noch.

Findet sich eine dieser Spuren, ist SVG zu SVG oder PNG zu SVG die bessere Seite dafür — echte Kurven statt einer Annäherung. Findet sich nichts, ist das WebP der einzige verbliebene Ausgangspunkt, und ein Nachzeichnen daraus ist besser als gar kein Vektor.

WebP kann verlustfrei oder verlustbehaftet kodiert sein, und die Endung sagt nicht, welches von beidem vorliegt. Ein verlustfreies WebP entspricht in etwa einem PNG: Die Kanten in der Datei sind die Kanten, die ursprünglich gezeichnet wurden, und der Nachzeichner findet sie sauber. Ein verlustbehaftetes WebP wurde geglättet und klingelt an harten Übergängen, ähnlich wie bei JPEG, und diese Wellen sieht der Nachzeichner als Struktur an.

Das Symptom ist ein Wappen mit leicht gequilteten Konturen und kleinen zusätzlichen Formen an jeder eigentlich scharfen Kante. „Glatt" statt „scharf" als Detaileinstellung entfernt die meisten davon, weil sie klein sind; eine niedrigere Farbanzahl entfernt mehr, weil weniger Paletteneinträge für das Rauschen übrig bleiben. Beides stellt die ursprüngliche Kante nicht wieder her, macht das Ergebnis aber deutlich brauchbarer.

Websites liefern Bilder in der Größe aus, die das Layout tatsächlich benötigt, häufig über einen automatischen Bilddienst. Ein Vereinswappen in der Kopfzeile bei 240 oder 320 Pixeln Breite ist völlig normal — und genau das ist alles, was der Nachzeichner an Information hat, um Kanten daran auszurichten.

Die Folge: Ecken runden sich ab, dünne Linien wackeln, und keine Einstellung auf dieser Seite behebt das, weil die Lösung mehr Pixel wäre. Vor dem Umwandeln lohnt sich der Blick, ob das Wappen an anderer Stelle größer vorliegt — auf gedrucktem Material, in einer alten Vereinszeitung, bei der Stickerei selbst, die das Motiv möglicherweise noch als Datei führt.

Vier für ein einfarbiges Symbol oder ein zweifarbiges Wappen, acht für eine flache Illustration mit mehreren Flächen, mehr nur dann, wenn sichtbar etwas fehlt. Acht ist die Grundeinstellung und für die meisten von einer Website gespeicherten Motive ein vernünftiger erster Versuch.

Bei einem verlustbehafteten WebP ist niedrig bleiben besonders sinnvoll: Jeder zusätzliche Paletteneintrag gibt dem Quantisierer eine weitere Stelle, an der er die Kompressionswellen ablegen kann. Vier zuerst probieren — wenn das Wappen dabei erkennbar bleibt, ist das sowohl die kleinste Datei als auch der sauberste Ausgangspunkt zum Nacharbeiten.

Die Detaileinstellung bestimmt, wie eng jede Kontur dem Pixelraster folgt und ab welcher Größe eine Form verworfen wird. Glatt folgt locker und verwirft alles unter sechzehn Pixeln; scharf folgt eng und behält Formen ab zwei Pixeln; ausgewogen liegt dazwischen und ist die Grundeinstellung.

Glatt ist hier meist die richtige Wahl, weil die kleinen Flecken eines von der Website gespeicherten Wappens Kompressionsartefakte sind und keine gestalterische Absicht. Scharf lohnt sich nur bei einem verlustfreien WebP mit wirklich pixelgenauen Details. Vorab geweichzeichnet wird dabei nie — das würde genau die harten Kanten zerstören, die überhaupt der Grund waren, das Motiv nachzuzeichnen.

Ein Stapel gefüllter Pfade, jeder mit einer einzelnen Fläche und einem passenden schmalen Rand, dazu ein vollflächiger Pfad mit Deckkraft null dort, wo das WebP durchsichtig war. Keine Gruppen, keine benannten Ebenen, kein Text als Text — steht im Wappen eine Schrift, kommt sie als Buchstabenkontur zurück und lässt sich nicht mehr in der ursprünglichen Schriftart neu setzen.

Für einen Wimpel, einen Banner oder einen Stickerei-Entwurf reicht das meist aus. Für einen offiziellen Druck in kleiner Auflösung oder eine Neufassung der Vereinssatzung lohnt es sich, die entstandene SVG-Datei als saubere Vorlage zum Nachzeichnen zu behandeln — die meisten Wappen bestehen aus wenigen geometrischen Formen, und diese von Hand nachzubauen ist schneller als eine Nachzeichnung mühsam aufzuräumen.

Bei einem eigenen Vereinsemblem ist das Nachzeichnen unproblematisch — der Verein hat das Recht daran, und die Vektordatei ersetzt lediglich eine verlorene Ausgangsdatei. Anders liegt der Fall, wenn ein Emblem eines anderen Vereins oder ein geschütztes Logo nachgebaut werden soll: Nachzeichnen ändert an der Eigentümerschaft nichts, unabhängig davon, wie sauber das Ergebnis aussieht.

Das ist eine Rechtsfrage und keine des Konverters, und sie gehört geklärt, bevor die Datei irgendwo weiterverwendet wird. Was diese Seite dazu beitragen kann: Die Umwandlung läuft vollständig im eigenen Browser, es entsteht keine serverseitige Kopie eines Wappens, das jemandem gehört und vielleicht nicht geteilt werden sollte.

Ist das Bild ein Foto — etwa vom Sommerfest —, verwandelt Nachzeichnen es in Flächen mit Postereffekt statt in ein brauchbares Ergebnis; WebP zu JPG oder WebP zu PNG ist dann die richtige Seite. Steht Text auf dem Bild, etwa eine eingescannte Ankündigung, liest WebP zu TXT die Wörter direkt statt sie in Konturen zu verwandeln.

Soll aus dem Wappen ein Favicon für die Vereinswebsite werden, erzeugt WebP zu ICO die Datei unmittelbar, ohne den Umweg über einen Vektor. Und geht es nur darum, das Bild in gewöhnlicher Software öffnen zu können, behält WebP zu PNG jedes Pixel, ohne etwas zu verlieren.

Dekodieren, Skalieren und Nachzeichnen laufen alle im Tab. Der WebP-Dekoder ist libwebp, kompiliert zu WebAssembly, und wird erst geladen, wenn tatsächlich ein WebP abgelegt wird — nichts vom Bild wird irgendwohin gesendet, und es gibt kein Konto und keine Tagesgrenze.

Der Nachzeichner selbst ist imagetracerjs, 46 KB reines JavaScript unter der Unlicense. Er ist nicht der leistungsfähigste verfügbare Nachzeichner — potrace und autotrace passen Kurven besser an, stehen aber unter GPL —, doch bei einem flachen Wappen fällt der Unterschied kaum ins Gewicht, und bei einem verlustbehafteten WebP entscheidet ohnehin die Kompression mehr als der Nachzeichner.