SVG in WebP umwandeln

Eine SVG-Datei beschreibt Formen, keine Bildpunkte: zeichne diesen Pfad, fülle diese Fläche. Ein Renderer folgt dieser Beschreibung an einer bestimmten Größe und hält das Ergebnis als Raster fest — ab diesem Moment ist die Zeichnung weg und nur noch das Bild da.

Die beim Rendern gewählte Größe ist also die, die man danach hat. Ein WebP nachträglich zu vergrößern kann nur Pixel erfinden, die nie gezeichnet wurden — genau das, was Vektorgrafik eigentlich vermeiden soll. Die richtige Größe zu wählen ist die eigentliche Arbeit dieser Umwandlung, alles andere auf dieser Seite ist Feinabstimmung um diese eine Entscheidung herum.

Öffentliche Stellen in Deutschland unterliegen der BITV 2.0, die auf die europäische Norm EN 301 549 verweist und unter anderem verlangt, dass Bildinhalte mit einer sinnvollen Textalternative versehen sind. Ein WebP, das aus einer SVG gerendert wurde, braucht deshalb ein eigenes alt-Attribut — die Vektordatei selbst trägt diese Information nicht automatisch mit.

Wer ein Icon oder ein Wappen für eine Kommunal- oder Landesseite rendert, sollte den Alternativtext also gleich mit einplanen, bevor die Datei ins Content-Management-System geht. Das ist keine Eigenschaft dieses Konverters, sondern eine Frage, die jede Bilddatei unabhängig vom Ursprungsformat stellt. Bei einem rein dekorativen Icon reicht ein leeres alt-Attribut, bei einem informationstragenden Symbol — einem Warnzeichen, einem Statusicon — gehört der Inhalt in Worte gefasst.

Ein Smartphone-Display packt zwei bis drei Gerätepixel in jeden CSS-Pixel, sodass ein Bild, das exakt in Anzeigegröße gerendert wurde, auf den meisten Geräten weich wirkt. Die übliche Praxis ist, mit dem zwei- oder dreifachen Faktor zu rendern und den Browser herunterskalieren zu lassen — ein flaches Icon bei zweifacher Größe kostet dabei nur einen Bruchteil dessen, was ein Foto gleicher Abmessung kosten würde.

Die Ausnahme sind große Flächen. Ein bildschirmfüllendes Motiv bei dreifacher Größe erzeugt eine Datei, die niemand herunterladen sollte; dort bleibt man bei zweifach oder liefert die SVG direkt aus, wenn die Seite das zulässt.

Eine SVG-Datei nennt ihre Schriftart, ohne sie einzubetten. Kennt der Renderer sie, wird korrekt gesetzt; kennt er sie nicht, wird ersetzt, meist mit anderen Laufweiten — eine Wortmarke in einer lizenzierten Hausschrift kann so in einer x-beliebigen Serifenlosen mit verschobenem Layout ankommen.

Der Fix gehört ins Zeichenprogramm, vor dem Export: Text in Pfade wandeln. Danach hängt nichts mehr von einer verfügbaren Schriftart ab. Bei einem Diagramm mit Beschriftung, die editierbar bleiben soll, ist stattdessen das Einbetten der Schrift in die SVG-Datei die bessere Wahl — welche der beiden Varianten der Renderer bei einer fehlenden Einbettung wählt, ist nicht dokumentiert und sollte deshalb nicht als gegeben vorausgesetzt werden.

Das hier geschriebene WebP ist immer verlustbehaftet — einen verlustfreien Modus gibt es auf diesem Paar nicht, nur den Regler, der bestimmt, wie stark komprimiert wird. Der Standardwert von 82 ist auf Fotografien abgestimmt und zeigt sich bei Vektorgrafik an der falschen Stelle: eine dünne Linie bekommt einen Schmier, und der Übergang zwischen zwei Flächenfarben einen Hof aus Zwischentönen.

Bei 95 oder höher verschwinden diese Artefakte bei einem Logo, einem Icon oder einem Diagramm, während die Datei wegen der flachen Farben trotzdem klein bleibt. Eine Illustration mit Verläufen verhält sich dagegen wie ein Foto und braucht davon nichts. Muss das Ergebnis exakt statt nur nah dran sein, ist PNG die richtige Zieldatei — das ist verlustfrei.

Oft. Ist das Motiv ein Logo, ein Icon oder eine einfache Illustration auf einer selbst betriebenen Seite, ist die SVG-Datei meist kleiner als jedes gerenderte Raster davon, auf jedem Zoomfaktor und jedem Bildschirm scharf, und lässt sich per CSS umfärben, ohne eine zweite Datei zu erzeugen.

Umwandeln lohnt sich, wo etwas SVG-Dateien ablehnt — und das kommt vor: Social-Media-Vorschaubilder verlangen PNG oder JPG in festen Maßen, E-Mail-Programme sind unzuverlässig, viele Upload-Formulare weisen das Format grundsätzlich zurück, und Plattformen mit Nutzer-Uploads sperren es aus Sicherheitsgründen — eine SVG-Datei ist XML und kann Skripte enthalten.

Der Renderer arbeitet auf vollständig durchsichtigem Grund, und WebP kann diese Transparenz als Alphakanal speichern — anders als bei JPG oder BMP wird hier nichts auf eine Hintergrundfarbe geflacht. Ein freigestelltes Icon oder ein Logo ohne Hintergrundfläche bleibt also freigestellt.

Das ist einer der Hauptgründe, WebP statt JPG als Ziel zu wählen, sobald das Motiv überhaupt eine transparente Fläche hat: JPG kennt keine Transparenz und würde sie ohne Rückfrage mit Weiß auffüllen, was bei einem Logo auf farbigem Untergrund sofort auffällt.

Standardmäßig rendert diese Seite 1.024 Pixel Breite, die Höhe ergibt sich aus dem Seitenverhältnis der SVG-Datei. Der Skalierungsfaktor reicht von 0,1 bis 10, die größtmögliche Breite liegt also bei 10.240 Pixeln — mehr als genug für jede Displaygröße, die derzeit im Einsatz ist.

Es gibt keine DPI-Angabe zu setzen, weil ein Bildschirm in Pixeln denkt und nicht in Punkten je Zoll. Wer aus dem Printbereich kommt und eine Auflösung in dpi gewohnt ist, rechnet stattdessen direkt in der Zielbreite in Pixeln, die die Webseite oder die Vorlage tatsächlich braucht.

Icons kommen selten allein. Wird der ganze Ordner abgelegt, rendert jede Datei mit dem gewählten Faktor, behält ihren Namen bei getauschter Endung, und alles kommt als ein ZIP zurück, bereit für den Build.

Zwei Gewohnheiten halten das Ergebnis konsistent: jedes Icon mit demselben Faktor rendern statt nach Gefühl, damit das Set auf den ersten Blick zusammenpasst, und die SVG-Dateien als Quelle in der Versionsverwaltung behalten — ein neuer Satz Größen kostet dann einen Durchgang statt einer Neuzeichnung.

Das Rendern läuft im Browser-Tab auf dem eigenen Prozessor. Es wird nichts hochgeladen, es gibt also keine Warteschlange, kein Tageskontingent und kein Konto — und keine dritte Stelle, die ein unveröffentlichtes Markenzeichen zu Gesicht bekommt, was bei Logos häufiger ein Thema ist als bei den meisten anderen Dateien.

Das heißt auch: ein Ordner mit hundert Icons — mehr nimmt ein Durchgang nicht auf einmal — wird so schnell umgewandelt, wie der eigene Rechner zeichnen kann, statt so schnell, wie sie hochgeladen und wieder abgerufen werden können.

Ein Vektor hat, wie schon gesagt, keine feste Auflösung — das ist keine Wiederholung, sondern der Grund, warum diese Umwandlung so wenig verzeiht: Sie ist eine Einbahnstraße. Was am Bildschirm noch scharf aussah, kann als zu klein gerendertes WebP nicht mehr nachgeschärft werden, ohne zurück zur Ursprungsdatei zu gehen.

Deshalb lohnt es sich, vor dem ersten Export kurz zu überlegen, wo das Bild überall landet — Startseite, mobile Ansicht, Social-Media-Vorschau — und für den größten dieser Fälle zu rendern. Kleinere Varianten lassen sich aus einer großen WebP-Datei per CSS oder im Bildeditor ableiten, der umgekehrte Weg funktioniert nicht.