GIF in SVG umwandeln

Bei vielen Vereinen, Handwerksbetrieben und kleinen Firmen liegt das eigene Logo nur noch als kleine GIF-Datei vor — irgendwann in den frühen Neunzigern oder Nullerjahren erstellt, seither auf der Vereinshomepage oder in einer alten Präsentation weitergereicht, ohne dass die ursprüngliche Zeichnung je aufbewahrt wurde. Sobald das Logo auf ein Banner, ein Vereinsheim-Schild oder eine Fahrzeugbeschriftung soll, reicht diese Datei nicht mehr: Ein paar hundert Pixel, großgezogen auf einen Meter Breite, werden unweigerlich unscharf.

Eine Beschriftungsfirma verlangt für solche Aufträge fast immer eine Vektordatei, weil sich nur die verlustfrei auf jede Größe bringen lässt. Diese Umwandlung nimmt genau diesen letzten Ausweg vorweg, ohne dass jemand das Logo neu zeichnen muss: aus dem Pixelbild wird ein Satz Pfade, wenn das Motiv dafür geeignet ist.

Nachzeichnen funktioniert, indem Grenzen zwischen Bereichen ähnlicher Farbe gesucht und um jeden Bereich eine Kontur gezogen wird. Am besten gelingt das, wenn diese Bereiche wirklich existieren, mit harten Kanten statt weichen Verläufen.

Ein indiziertes Bild ist genau das von seiner Bauart her. Ein GIF-Bild wird aus einer Palette von höchstens 256 Einträgen gezeichnet, jeder Bildpunkt ist also einer von wenigen exakten Werten, und die Flächen sind schon flach, bevor das Nachzeichnen überhaupt beginnt. Ausgerechnet die Beschränkung, die GIF als Fotoformat untauglich macht, macht es hier zur guten Vorlage.

Wichtig zu wissen, was tatsächlich herauskommt: Die SVG-Datei ist nicht die Zeichnung, die irgendwann am Reißbrett oder am Computer entstand, sondern ein neuer Satz Pfade, der den Pixeln jener Datei folgt. War im Original ein perfekter Kreis, entsteht eine geschlossene Kurve, die einem aus Pixeln gebauten Kreis folgt.

Bei den Größen, in denen so ein Logo tatsächlich verwendet wird, fällt dieser Unterschied nicht auf. Sichtbar wird er dort, wo das Original etwas enthielt, das ein Pfad nicht abbilden kann — ein Farbverlauf wird zu gestuften Bändern, ein Schlagschatten zu mehreren ineinanderliegenden Formen, und die Kantenglättung entlang einer Rundung wird zu einem dünnen zusätzlichen Umriss in einer Zwischenfarbe.

Die Farbeinstellung reduziert das Bild vor dem Nachzeichnen auf diese Anzahl flacher Füllungen, und sie hat den größten Einfluss auf Aussehen und Größe des Ergebnisses. Vier ergibt die saubersten Formen und passt zu einem einfarbigen Zeichen. Acht ist voreingestellt und passt zu den meisten Vereins- und Firmenlogos. Sechzehn oder zweiunddreißig folgen der Vorlage genauer und vervielfachen die Zahl der Pfade.

Der Reflex, gleich die höchste Zahl zu wählen, führt selten zum besseren Ergebnis. Mehr Farben heißen, dass der Kantensaum um jede Rundung eigene Formen bekommt statt in die angrenzende Fläche aufzugehen — und genau diese Formen machen den größten Teil der Dateigröße aus und wären beim Nachbearbeiten von Hand das Erste, was gelöscht würde. Niedrig anzufangen und nur bei Bedarf zu erhöhen ist der schnellere Weg.

Die Detailstufe steuert zwei Fehlerschwellen und eine Mindestgröße für Formen. Weich akzeptiert eine großzügigere Annäherung an die Pixelkanten und verwirft jede Form unter sechzehn Pixeln; ausgewogen halbiert diese Toleranzen und verwirft unter acht; scharf folgt den Pixeln eng und behält alles über zwei.

Praktisch entscheidet das über die Krümel, die eine Kantenglättung entlang jeder Kontur hinterlässt — auf scharf werden sie alle zu eigenen Pfaden, oft Hunderte davon, einzeln unsichtbar und trotzdem für den größten Teil der Dateigröße verantwortlich. Weich entfernt sie und rundet dabei Ecken leicht ab. Für ein Logo, das später vergrößert wird, ist weich fast immer die bessere Wahl; für Pixelgrafik, die genau als solche erhalten bleiben soll, ist scharf die einzig richtige.

Stammte das GIF ursprünglich von einem Foto oder enthielt es einen weichen Verlauf, hat die Software beim Speichern fast sicher gedithert — Pixel zweier Palettenfarben schachbrettartig gestreut, sodass das Auge sie zu einem sanften Übergang mittelt. Das sieht aus wie ein weicher Verlauf und ist keiner.

Für einen Nachzeichner sind das Tausende winziger, abwechselnder Bereiche, aus denen ebenso viele Pfade werden. Das Ergebnis wird riesig, das Zeichnen dauert lange, und das sichtbare Ergebnis wirkt eher zerhackt als weich. Am zuverlässigsten lässt sich das vorher erkennen, indem man in das GIF hineinzoomt — zeigen sich in den vermeintlich flachen Flächen Schachbrettmuster, lohnt sich der Versuch hier eher nicht.

Alles mit einer längsten Kante über 1600 Pixeln wird vorher auf diese Größe herunterskaliert. Der Aufwand des Nachzeichnens wächst mit der Anzahl der Kanten, nicht mit der Dateigröße, und ein großes Bild hat fast überall eine Kante — ohne diese Obergrenze würde eine große Vorlage über zig Sekunden hinweg eine mehrere Megabyte große SVG-Datei erzeugen.

Für diesen Zweck kostet die Obergrenze nichts, und das ist keine Beschönigung: Das Ergebnis ist auflösungsunabhängig — ein aus 1600 Pixeln nachgezeichnetes Zeichen und dasselbe Zeichen aus 4000 Pixeln erscheinen bei jeder Bildschirm- oder Druckgröße identisch. Es ändert sich nur, wie eng die Pfade dem ursprünglichen Pixelraster folgen, ein Unterschied, den man nur bei starker Vergrößerung der Vorlage überhaupt sieht.

Enthält das GIF neben dem Symbol auch den ausgeschriebenen Vereins- oder Firmennamen, ist das die Stelle, an der die Umwandlung am schlechtesten abschneidet — bei einem gemessenen Beispiel mit reinem Text kam eine SVG-Datei heraus, die vierzigmal so groß war wie die Vorlage, weil jeder kantengeglättete Buchstabe seine eigenen Formen bekam.

Der bessere Weg ist dann, nur das grafische Symbol nachzuzeichnen und den Namen anschließend als echten Text in der SVG-Datei zu setzen, in der tatsächlich verwendeten Schriftart — kleiner, an jeder Größe schärfer, und später noch bearbeitbar, falls der Verein einmal umbenannt wird oder ein Rechtschreibfehler in der alten Vorlage steckt. Nachzeichnen lohnt sich für Schrift nur, wenn diese wirklich eine eigens gezeichnete Form ist statt einer Schriftart.

Nichts hier versucht vorherzusagen, ob ein bestimmtes GIF gut nachzeichnet. Eine Schätzung anhand der Farbanzahl wäre nur eine Vermutung, und die echte Antwort liegt einen Moment später kostenlos vor: nachzeichnen, und dann vergleichen, was herauskam, mit dem, was hineinging.

Beide Größen stehen direkt nebeneinander, sodass ein Ergebnis, das vierzigmal größer ist, sofort auffällt. Das ist kein Kuriosum, sondern ein zuverlässiges Signal: Eine SVG-Datei, die größer ist als ihre Vorlage, sagt, dass das Bild keine flachen Bereiche zum Finden hatte — und keine Einstellung ändert etwas an dieser Eigenschaft der Vorlage selbst.

Der Nachzeichner ist eine kleine JavaScript-Bibliothek — bewusst gewählt, unter anderem weil die leistungsfähigeren Alternativen unter Lizenzen stehen, die eine statische Website nicht einhalten kann — und läuft im Tab. Das GIF wird dekodiert, reduziert, nachgezeichnet und als SVG geschrieben, ohne dass eine Anfrage den Browser verlässt.

Der praktische Vorteil neben der Privatsphäre ist die Geschwindigkeit bei kleinen Dateien: kein Upload, keine Warteschlange, kein separater Download des Ergebnisses — ein Vereinslogo lässt sich in deutlich unter einer Sekunde nachzeichnen, und drei verschiedene Farbanzahlen auszuprobieren kostet nichts außer den Klicks dafür.