SVG in GIF umwandeln

Das muss vor dem Umwandeln geklärt sein, weil es kaum irgendwo erwähnt wird: GIF kennt Transparenz, aber nur in einer Form — ein einzelner Eintrag der Farbpalette kann als unsichtbar markiert werden. Der hier verwendete Encoder markiert keinen. Er baut eine Palette, schreibt sie als Liste von Rot-Grün-Blau-Werten, und wenn die Datei fertig ist, gibt es keinen Platz mehr für Alphainformation.

Eine aus einem SVG gerenderte Zeichnung hat überall dort durchsichtige Pixel, wo nichts gezeichnet wurde, und jeder davon muss vor dem Aufbau der Palette zu etwas Undurchsichtigem werden. Sie werden mit der auf dieser Seite eingestellten Hintergrundfarbe gefüllt, die bei Weiß beginnt. Ein auf nichts gezeichnetes Logo kommt also auf einer weißen Karte an — unsichtbar auf einer weißen Seite und gut sichtbar auf einer dunklen, und genau das lohnt sich zu prüfen, bevor die Datei irgendwohin geht.

Die Hintergrundfarbe auf dieser Seite entscheidet, was aus den leeren Bereichen wird, und sie wird zuerst gelesen: Die Füllung wird auf die Fläche gezeichnet, bevor die gerenderte Zeichnung in einem Durchgang darübergelegt wird. Diese Reihenfolge ist der Grund, warum die Kanten sauber ausfallen. Erst zu füllen und danach zu skalieren, oder eine durchsichtige Fassung erst zu skalieren und dann zu füllen, hinterlässt an jeder Kurve einen Saum halbtransparenter Pixel, den die Füllung anschließend verdunkelt.

Die Farbe an das anpassen, worauf das GIF tatsächlich sitzt. Geht es auf eine weiße Seite, bleibt die Voreinstellung richtig. Ist der Hintergrund farbig und der Hex-Wert bekannt, ihn eintragen — der Übergang verschwindet. Wechselt der Hintergrund je nach Vorlage, lohnt sich stattdessen ein Rechteck über der ganzen viewBox direkt in der Zeichnung, damit die Datei ihren eigenen Untergrund mitbringt.

Ein SVG hat keine Größe, die Umwandlung wählt also eine: 1.024 Pixel Breite in der Voreinstellung, die Höhe folgt den Proportionen der Zeichnung. Das passt gut zu PNG oder WebP, wo ein großes flaches Bild wenig kostet. Zu einem GIF passt es schlecht, weil die Stellen, die heute noch eines verlangen — Signaturblöcke, Avatare, Forensymbole — fast immer bei 100 bis 300 Pixeln arbeiten.

Die Skalierung nutzen. Bei 0,2 rendert dieselbe Zeichnung 205 Pixel breit, näher an dem, was diese Ziele tatsächlich anzeigen, und die Datei schrumpft ungefähr mit der Fläche. Ein 1.024-Pixel-GIF dorthin zu schicken, wo 150 gebraucht wurden, heißt nur, dass eine fremde Software es verkleinert — meist ohne zu fragen und selten gut.

Die Reduktion ist milder, als die Zahl 256 vermuten lässt, jedenfalls bei der Art Zeichnung, die als SVG ankommt. Flächige Füllungen brauchen je eine Farbe, Konturen eine weitere, und die Kantenglättung fügt an jeder Kante eine Handvoll Zwischentöne hinzu — bei einer zweifarbigen Zeichnung ergibt das insgesamt ein paar Dutzend Werte.

An der eigenen Testdatei ergab das eine so kleine Palette, dass der Encoder eine Farbtabelle mit sechzehn Einträgen schrieb — die kleinste Zweierpotenz, die dafür reichte —, und das ganze 1024-mal-1024-Pixel-GIF kam auf 7.844 Byte aus einem 140 Byte großen SVG. Flache Kunst komprimiert in diesem Format hervorragend, weil GIF Läufe gleicher Werte speichert und eine Zeichnung größtenteils aus solchen Läufen besteht.

Verläufe sind der Fall. Ein linearer oder radialer Verlauf über eine große Fläche erzeugt hunderte einzelne Werte, die Palette kann sie nicht fassen, und der Quantisierer wählt Stellvertreter — das Ergebnis zeigt Stufen statt eines weichen Übergangs. Bei einem 1.024-Pixel-Rendering sind diese Stufen deutlich sichtbar.

Weiche Schlagschatten, unscharfe Kanten und halbtransparente Überlagerungen tun dasselbe, weil jede von ihnen eine Reihe verblendeter Werte erzeugt. Enthält die Zeichnung etwas davon und lässt sich das Ziel nicht von GIF abbringen, hilft ein kleineres Rendering — weniger Pixel bedeuten weniger unterschiedliche Verblendungen und weniger sichtbare Streifen.

SVG kann animieren: mit SMIL-Elementen, per CSS-Animation, und eine Datei kann sogar Skript enthalten. GIF kann ebenfalls animieren, was nahelegt, dass beides zusammenpasst. Tut es nicht: Der Renderer erzeugt genau einen statischen Frame im Anfangszustand der Zeichnung, und der Encoder schreibt genau diesen einen Frame in die Datei.

Ein animiertes Logo kommt also als seine erste Pose zurück, und keine Einstellung ändert das. Ein bewegtes GIF aus einem bewegten SVG zu erzeugen wäre eine ganz andere Aufgabe — die Animation müsste abgespielt und Bild für Bild eingefangen werden, was ein Renderer für Standbilder nicht tut.

In Behörden und größeren Unternehmen läuft oft ein sogenanntes Fachverfahren — eine Software, deren Formulare und Vorgaben Jahre oder Jahrzehnte alt sind, gepflegt von einer Stelle, die selten Grund hat, den Upload-Dialog anzufassen. GIF wird seit 1987 überall gelesen, und genau das war der Grund für die Vorgabe: eine Antwort, die auf keiner der damals verbreiteten Anwendungen scheitern konnte.

Den Rest der Vorgabe lohnt es sich mitzulesen. Eine Spezifikation, die alt genug ist, um GIF zu nennen, legt fast immer auch eine maximale Pixelgröße und eine maximale Dateigröße fest — das Format war selten die einzige Bedingung. Alle auf einmal zu treffen ist schneller als drei Anläufe mit Ablehnung.

Ein Versuch lohnt sich, bevor man den Kompromiss akzeptiert. Viele Systeme, deren Hilfetext GIF verlangt, akzeptieren in ihrer Prüflogik auch PNG, weil der Text früher geschrieben wurde als der Code und der Code alles abdeckt, was die zugrunde liegende Bibliothek liest. Geht es durch, bleibt die Transparenz exakt erhalten, und die Farbreduktion entfällt ganz.

Ist GIF tatsächlich zwingend, dann die Füllfarbe bewusst wählen statt die Voreinstellung ungeprüft zu übernehmen. Das Ergebnis ist dann ein Bild mit flachem Hintergrund, das bewusst entschieden wurde statt zufällig entstanden ist, und es sieht bei jedem Empfänger gleich aus — was die Vorgabe von Anfang an erreichen wollte.

In größeren deutschen Unternehmen laufen Intranet-Portale und interne Formulare oft auf Systemen, die seit vielen Jahren nicht grundlegend erneuert wurden — ein Upload-Feld für ein Profilbild oder ein Team-Logo, dessen Prüfcode noch aus einer Zeit stammt, in der GIF der sichere Standard war. Zu ändern ist daran meist wenig, außer dem, was hochgeladen wird.

Für ein einzelnes Bild ist das kein großer Aufwand, aber es lohnt sich, den Vorgang einmal zu dokumentieren, wenn mehrere Kolleginnen und Kollegen regelmäßig Logos für dasselbe System einreichen müssen — damit nicht jede Person für sich neu herausfindet, dass ein weißer statt eines transparenten Hintergrunds nötig ist.

Weil die Füllfarbe erst beim Rendern entschieden wird, lohnt sich ein kurzer Blick auf das fertige GIF, bevor es an die Zielstelle geht — insbesondere auf einem Bildschirm mit dunklem Systemthema, wo eine vergessene weiße Füllung sofort als Kasten auffällt, den ein Vorschaubild in der eigenen Entwicklungsumgebung eventuell nicht zeigt.

Ein zweiter Blick lohnt sich auch bei der Dateigröße: Kommt bei einer eigentlich einfachen Zeichnung eine überraschend große Datei heraus, steckt meist ein Verlauf oder ein weicher Schatten dahinter, den man vor dem endgültigen Export noch entfernen oder abschwächen kann.

Den ganzen Ordner ablegen. Jedes SVG wird mit derselben Skalierung gerendert und einzeln kodiert, alles kommt als ZIP zurück. Die Palette entsteht je Bild und nicht über den ganzen Satz hinweg, dieselbe Markenfarbe kann also in zwei Dateien an einem leicht anderen Index landen — im Gebrauch unsichtbar, aber ein Grund, die Dateien nicht Byte für Byte identisch zu erwarten.

Jede Datei behält auch ihre eigenen Einstellungen, die Hintergrundfarbe wird also pro Zeile gewählt statt einmal für den ganzen Ablauf. Geht ein Satz in dieselbe Vorlage, lohnt sich, vorher auf allen denselben Wert zu setzen, statt es hinterher an einer einzelnen Signatur zu bemerken.