SVG in AVIF umwandeln

AVIF ist das effizienteste Standbildformat, das derzeit breit im Einsatz ist, und die Umstellung lohnt sich für Fotos, Screenshots und Produktbilder. Für eine Zeichnung gilt das nicht: Ein SVG ist eine Beschreibung von Formen und damit bereits so klein, wie sich das Bild ausdrücken lässt, und es rendert in jeder Größe, die das Layout verlangt, ohne eine zweite Datei.

Die Messung: eine 140 Byte kleine Testzeichnung ergab bei der Standardbreite von 1.024 Pixeln ein AVIF von 9.730 Byte. Echte Logos sind als SVG größer — ein paar Kilobyte sind üblich —, aber die Größenordnung des Ergebnisses ändert sich dadurch nicht, und das AVIF braucht zusätzlich ein srcset und einen Fallback. Ging es beim Umwandeln um die Dateigröße, arbeitet dieser Schritt dagegen.

Es gibt vier Fälle, und sie sind nicht offensichtlich. Der erste: Das SVG ist eigentlich kein Vektor mehr — eine Datei, die aus einem Foto nachgezeichnet wurde, oder eine mit eingebettetem Base64-Rasterbild, beide können hunderte Kilobyte groß werden und lassen sich als AVIF deutlich kleiner kodieren. Der zweite: Die Zeichnung nutzt Filter — Weichzeichner, Mischmodi, komplexes Clipping —, die Browser unterschiedlich umsetzen; einmal rendern macht das Ergebnis überall identisch.

Der dritte ist eine technische Zwangslage: ein CDN, ein Bildproxy oder ein CMS, das Rasterformate verarbeitet und SVG grundsätzlich ablehnt. Der vierte ist Vertrauen — ein SVG ist XML und kann Skripte oder externe Verweise enthalten, weshalb Seiten, die Zeichnungen von Nutzern annehmen, sie oft lieber rastern als einen Bereinigungsfilter zu pflegen. Jeder dieser Fälle macht die Umwandlung richtig. „Alles andere ist inzwischen AVIF" macht sie nicht richtig.

Die Eigenschaft, die dabei aufgegeben wird, wird leicht unterschätzt. Ein einziges SVG bedient ein Telefon bei dreifacher Dichte, einen Laptop bei doppelter, einen externen Monitor bei einfacher und ein Druck-Stylesheet — alles aus denselben Bytes, und auf jedem davon scharf. Sobald daraus ein AVIF wird, bedient es genau eines davon gut.

Den Rest zurückzuholen bedeutet, bei mehreren Breiten zu rendern und ein srcset zu schreiben — drei oder vier Dateien und ein Stück Markup, wo eine Datei ohne beides reichte. Diese Komplexität ist der eigentliche Preis dieser Umwandlung, und er ist größer als die Kilobyte auf beiden Seiten des Vergleichs.

Die Skalierung ist die einzige Entscheidung, die diese Umwandlung verlangt. Die Voreinstellung rendert 1.024 Pixel breit, die Höhe folgt den Proportionen der Zeichnung, und der Wertebereich reicht von 0,1 bis 10 — also 102 bis 10.240 Pixel.

Eine sinnvolle Gewohnheit: die größte CSS-Breite finden, die das Bild jemals einnehmen wird, und mit doppeltem Wert rendern — das deckt Displays mit doppelter Dichte ab, ohne ein vollständiges srcset zu brauchen. Ein Logo, das bei 180 Pixeln angezeigt wird, will einen 360-Pixel-Render, keinen 1.024-Pixel-Render — bei diesen Maßen ist das AVIF tatsächlich klein, was nichts daran ändert, dass das SVG kleiner war und jede Dichte zugleich bediente.

AVIF ist der Intra-Frame-Pfad eines Videocodecs, gebaut darauf, Blöcke aus ihren Nachbarn vorherzusagen und das Rest-Detail zu verwerfen, das ein bewegtes Auge ohnehin nicht auffängt. Auf einem Foto ist dieser Rest Textur. Auf einer Zeichnung ist er die Kante eines Buchstabens, und die Standardqualität von 82 ist für Ersteres gedacht.

Sichtbar wird das als leichte Weichzeichnung entlang scharfer Grenzen und, bei niedrigeren Einstellungen, als schwaches Fleckenmuster in großen flächigen Füllungen. Für flache Kunst hilft eine Qualität nahe 95 — bei diesen Maßen kostet das einstellige Kilobyte-Beträge und ist der Unterschied zwischen einer Marke, die gezeichnet aussieht, und einer, die fotografiert wirkt.

Der Alphakanal kommt durch: An einer Testzeichnung liest der Eckpixel des Ergebnisses 0,0,0,0, ein freigestelltes Zeichen fällt also auf jeden Hintergrund genauso wie das SVG. Das ist nicht selbstverständlich unter den Rasterzielen dieser Seite — der GIF-Pfad wandelt dieselbe Ecke in undurchsichtiges Schwarz.

Gespeichert wird sie als zweite kodierte Ebene neben der Farbe, praktisch ein kleines zweites Bild im Container. Bei einem Foto verschwindet dieser Mehraufwand im Rauschen; bei einer einfachen Zeichnung, deren ganze Datei ein paar Kilobyte umfasst, ist er ein sichtbarer Anteil der Gesamtgröße.

Jeder aktuelle große Browser dekodiert AVIF, seit mehreren Jahren, was für die meisten Seiten reicht, es direkt auszuliefern. SVG liest seit deutlich länger praktisch alles: Design-Werkzeuge, Office-Software, Ticketsysteme, E-Mail-Programme, die bei einem AVIF ein defektes Bild anzeigen würden.

Ein Vektor durch ein AVIF zu ersetzen verkleinert also den Kreis der Dinge, die die Grafik darstellen können, und die übliche Abhilfe — ein picture-Element mit Fallback-Quelle — bedeutet, zwei Dateien zu versenden, wo das SVG allein in beiden Fällen gereicht hätte.

Mobile Tarife in Deutschland fallen im Vergleich oft eher klein aus, und wer regelmäßig außerhalb dichter Netzabdeckung unterwegs ist, spürt jedes eingesparte Kilobyte direkt in Ladezeit und verbleibendem Datenvolumen. Ein Icon-Set, das statt SVG als AVIF ausgeliefert wird, verschlimmert genau dieses Problem, statt es zu lösen.

Umgekehrt gilt: Wo AVIF wirklich sinnvoll ist — bei einem Foto oder einem gerasterten Bild —, ist die Ersparnis real und spürbar, gerade unter diesen Bedingungen. Der Unterschied liegt allein daran, ob die Quelle tatsächlich ein Bild ist oder eine Beschreibung von Formen.

Wer eine Zeichnung überhaupt rastert, steht am Ende oft vor der Wahl zwischen AVIF und JPEG XL. An denselben Zahlen gemessen liegt JPEG XL bei kleiner, flacher Kunst spürbar hinter AVIF zurück — mehr dazu auf der eigenen SVG-zu-JXL-Seite. Für ein Web-Asset, das im Browser angezeigt werden soll, ist AVIF deshalb die Umwandlung mit dem kleineren Ergebnis und der breiteren Unterstützung.

Der Unterschied zwischen den beiden Zielen ist selten die Bildqualität, sondern wo die Datei am Ende landet: AVIF für eine Webseite, JPEG XL für ein Archiv oder eine Werkzeugkette, die bereits darauf aufbaut. Beide sind hier deutlich größer als das SVG, aus dem sie stammen — die Wahl zwischen ihnen entscheidet nur, welches der beiden Übel kleiner ausfällt.

Der AV1-Encoder ist das größte WebAssembly-Modul dieser Seite und das langsamste — ein AVIF-Standbild zu erzeugen bedeutet, eine echte AV1-Intra-Frame-Suche durchzuführen. Eine einzelne 1.024-Pixel-Zeichnung dauerte im Test rund eine Sekunde vom Anfang bis zum Ende, einschließlich des ersten Ladens des Encoders.

Für eine Datei ist das nichts. Für einen Ordner mit zweihundert Illustrationen ist es eine echte Wartezeit, und sie wiederholt sich bei jedem Build, wenn dieser Schritt in einer Pipeline steckt. Bauzeit dafür auszugeben, einen Vektor größer zu machen, ist in beide Richtungen ein schlechter Tausch.

Den ganzen Ordner ablegen. Jede Zeichnung wird mit derselben Skalierung gerendert und mit derselben Qualität kodiert, und die Ergebnisse kommen als ein ZIP zurück. Eine gemeinsame Skalierung ist meist das, was ein Illustrationssatz braucht, weil Einheitlichkeit über den Satz hinweg mehr zählt als eine einzelne optimale Datei.

Die Proportionen stimmen nur überein, wenn schon die viewBoxes der Quellen es taten — die Skalierung legt die Breite fest, die Höhe folgt jeder Zeichnung einzeln. Die SVGs aufheben lohnt sich in jedem Fall: Sie sind die Originale, und die AVIFs sind ein Export, der sich jederzeit in jeder Größe neu erzeugen lässt.