SVG-Dateien für das Web vorbereiten und optimieren

Die Größe einer SVG steckt selten dort, wo du sie vermutest. Nicht die Anzahl der Formen entscheidet, sondern die Anzahl der Nachkommastellen in den Pfaddaten und die Frage, ob irgendwo ein Foto eingebettet ist. Wer SVG-Dateien für das Web vorbereiten und optimieren will, kommt deshalb mit zwei Hebeln sehr weit, und beide haben nichts mit einem Kompressionsknopf zu tun.

Der erste Hebel liegt in der Datei selbst, der zweite im Transport. Der Vektor-Editor hilft beim ersten, weil er die Grafik als Geometrie öffnet und wieder als SVG ausgibt; für den zweiten ist der Server zuständig.

Zwei Achsen, die du auseinanderhalten musst

Die erste Achse ist die Reduktion beim Erzeugen. Weniger Pfadpunkte, gerundete Koordinaten, keine unsichtbaren Ebenen, kein Editor-Ballast. Die zweite Achse ist die Kompression beim Ausliefern, mit gzip nach RFC 1952 oder Brotli nach RFC 7932. Beide Achsen senken die übertragene Menge, und keine von beiden verändert die Darstellung, solange du bei der Reduktion nicht übertreibst.

Der Unterschied ist praktisch wichtig. Kompression erledigt der Webserver und du musst nichts dafür tun. Reduktion erledigt niemand für dich, und sie ist der Teil, der über eine gute oder eine schlechte SVG entscheidet.

Nachkommastellen sind der größte Einzelposten

Schau dir einen Pfad an. Ein Koordinatenwert wie 12.3456 belegt sieben Zeichen, 12.3 belegt vier. Drei Zeichen gespart, pro Koordinate. Über zweitausend Koordinaten sind das rund sechs Kilobyte, und das ist mehr, als viele Icons überhaupt wiegen.

Die Grenze ist dabei nicht technisch, sondern optisch. Weniger Nachkommastellen verändern die Geometrie ein wenig. Bei einem Icon mit 24 Einheiten Kantenlänge bleibt der Fehler einer gerundeten Koordinate deutlich unter einem Prozent der Zeichenfläche und damit unsichtbar. Bei einer technischen Zeichnung mit engen Toleranzen kann dieselbe Rundung sichtbar werden. Die Regel lautet also nicht „so wenige Stellen wie möglich“, sondern „so wenige, wie dein Motiv verträgt“.

Eingebettete Bilder dominieren alles andere

Wenn eine SVG ein Rasterbild enthält, ist die Diskussion über Pfadpräzision beendet. Ein eingebettetes Foto kann ein Vielfaches aller Pfaddaten ausmachen, und zwar unabhängig davon, wie sparsam die Pfade geschrieben sind. Die Bytes, die du an den Koordinaten sparst, verschwinden neben einem einzigen Bildblock.

Für das Web ist das selten die richtige Bauform. Ein Foto gehört in eine eigene Bilddatei, die der Browser getrennt und passend skaliert laden kann, und nicht als Base64-Block in eine SVG. Wenn du eine solche Datei erbst, ist das Auslagern meist der wirksamste einzelne Schritt.

Die zweite Konsequenz betrifft die Sicherheit. Fremde SVG-Dateien können Skriptanteile enthalten und sollten vor dem Einbetten in eine Seite bereinigt werden. Für Dateien aus unbekannter Quelle ist das kein optionaler Schritt.

Was der Editor nicht für dich tut

Der Editor exportiert SVG, aber er minifiziert die Datei nicht und entfernt auch keine Metadaten. Wenn du eine Datei mit Kommentaren, versteckten Ebenen und nicht verwendeten Definitionen öffnest und wieder speicherst, ist das Ergebnis nicht automatisch leichter. Ein Werkzeug, das Leerraum und Kommentare entfernt, ist etwas anderes als ein Editor.

Dazu kommt der Reifegrad. Das Upstream-Projekt bezeichnet diesen Build als Alpha. Prüfe deshalb jeden Export, bevor er online geht: Datei im Browser öffnen, mit der Vorschau vergleichen, auf fehlende Verläufe und verschwundene Konturen achten.

Der Liefercheck vor dem Upload

Vier Dinge lohnen sich, bevor die Datei auf den Server geht. Erstens die Größe im Verhältnis zum Motiv, denn ein Icon, das deutlich mehr wiegt als vergleichbare Dateien, ist ein Hinweis auf eingebettete Daten. Zweitens die viewBox, die vorhanden und plausibel sein sollte. Drittens die Schriftfrage, denn Text in fremden Schriften ist eine Wette auf das Zielsystem. Viertens die Anzahl der Dateien, denn ein einziges SVG-Icon, das in drei Größen erscheint, ersetzt drei PNG-Dateien und damit drei Anfragen.

Der letzte Punkt ist der unterschätzte. Optimierung ist nicht nur Bytes pro Datei, sondern auch, wie viele Dateien eine Seite überhaupt anfordert. Eine gut gebaute SVG ersetzt oft ein halbes Dutzend Rastervarianten.

Wer den grundlegenden Ablauf noch nicht kennt, beginnt bei SVG-Dateien im Browser bearbeiten. Und wenn die Grafik in mehreren Größen erscheinen soll, erklärt SVG ohne Qualitätsverlust skalieren, warum dafür eine einzige Datei genügt.