SVG fürs Web optimieren, ohne es kaputtzumachen

Zu viele Ankerpunkte. Ein Tracer setzt überall einen Punkt, wo die Pixelgrenze abbiegt, und bei einer geglätteten Kurve ist das ständig. Eine Kurve, die vier Punkte braucht, kann vierzig bekommen.

Übertriebene Nachkommastellen. Koordinaten wie 127.38472615 sind in Vektorisierungen üblich, und die letzten Stellen beschreiben oft Abstände, die in jeder Größe, in der die Datei gezeigt wird, kleiner als ein Pixel sind.

Doppelte und unsichtbare Formen. Pfade ohne Fläche, Formen, die komplett hinter anderen verschwinden, übrig gebliebene Schnittmasken-Rechtecke.

Metadaten des Editors. Öffne ein vektorisiertes Ergebnis in Inkscape, speichere es, und schon hast du einen Block Inkscape-spezifischer Namespace-Daten hinzugefügt, die kein Browser liest.

Inline-Stile, die sich an jedem Element wiederholen. Fünfzig Pfade, jeder mit denselben Angaben für fill und stroke.

Dieser Schritt macht den Rest erst sinnvoll, und er dauert eine Minute.

Notier dir für das Original drei Werte: Dateigröße, Anzahl der Ankerpunkte (die meisten Editoren zeigen sie an, oder du zählst die Koordinatenpaare in den d-Attributen) und einen Screenshot in der Größe, in der die Grafik wirklich verwendet wird. Dann optimiere, notier dieselben drei Werte und vergleiche die Screenshots in dieser Größe nebeneinander.

Ohne das rätst du nur. Damit erkennst du den Unterschied zwischen einer Optimierung, die 80 % gespart und nichts verändert hat, und einer, die 85 % gespart und still deine Kurven plattgemacht hat.

Die Pfade vereinfachen. Das bringt meist am meisten. Die Pfadvereinfachung fasst überflüssige Ankerpunkte zusammen und hält die Kurve dabei innerhalb einer Toleranz, die du festlegst. Wie weit du gehen kannst, hängt ganz vom Motiv ab: Ein kräftiges geometrisches Zeichen verträgt starke Vereinfachung, eine detaillierte Illustration nicht. Fang vorsichtig an, vergleich mit deinem Referenz-Screenshot, erhöh, bis du einen Unterschied siehst, und geh dann wieder einen Schritt zurück.

Mach es schon beim Vektorisieren, wenn dein Tool das erlaubt. Beim Vektorisieren zu vereinfachen ergibt meist bessere Kurven als hinterher, weil der Tracer noch die ursprünglichen Pixeldaten hat.

Nachkommastellen kürzen. SVGO bietet das als einstellbaren Wert an. Zwei oder drei Nachkommastellen passen für viele Web-Icons und Logos, aber die richtige Zahl hängt vom Maßstab deiner Koordinaten und davon ab, wie fein die Details sind. Das ist ein Parameter zum Testen, keine Regel, und meist einer der günstigsten Gewinne überhaupt.

Die Metadaten entfernen. Editor-Namespaces, Kommentare, leere Gruppen, ungenutzte Definitionen. In einer Datei, die du auslieferst, gefahrlos.

Versteckte Geometrie entfernen. Formen ohne Fläche, Elemente mit null Deckkraft, alles, was von einer deckenden Form darüber komplett verdeckt wird. In einer Produktionskopie gefahrlos. Denk daran, dass manches davon in einer Arbeitsdatei Absicht sein kann.

Wiederholte Stile in CSS auslagern. Haben alle Pfade dieselbe Füllung, ist eine Klasse besser als fünfzig Inline-Attribute.

Das ist wichtiger als jede einzelne Einstellung. Optimieren ist verlustbehaftet, und es gibt kein Rückgängig, wenn du die Datei einmal überschrieben hast.

Behalte eine bearbeitbare Masterdatei mit ihren Ebenen, ihren versteckten Varianten und ihrer Struktur. Exportiere eine optimierte Kopie fürs Web. Ändert sich das Design, bearbeitest du die Masterdatei und exportierst neu, statt eine minifizierte Datei zurückzuentwickeln.

SVGO ist der Standard. Über die Kommandozeile, als Build-Schritt oder über die Weboberfläche SVGOMG, wenn du jede Optimierung einzeln umschalten und das Ergebnis beobachten willst.

Auf eine Einstellung solltest du achten: removeViewBox entfernt das Attribut, mit dem ein SVG responsiv skaliert. Es gehört nicht zum Standard-Preset von SVGO, lässt sich aber ausdrücklich aktivieren, und andere Toolchains, die SVGO einbinden, sind womöglich anders konfiguriert. Skaliert ein SVG nach der Verarbeitung plötzlich nicht mehr richtig, prüf das zuerst.

Die Einstellungen deines Tracers zählen mehr als jede Nachbearbeitung. Eine Vektorisierung mit passend eingestellter Farbanzahl und passendem Detailgrad ergibt eine Datei, die kaum Optimierung braucht. Eine Vektorisierung mit maximalem Detailgrad ergibt eine, die kein Optimierer ganz retten kann.

Übervereinfachung ist ein echter Fehler, und auf einem großen Bildschirm übersieht man ihn leicht.

Prüf in der Größe, in der es verwendet wird. Ein Logo, das bei 400 % Zoom optimiert wurde, kann bei 32 px in einer Navigationsleiste falsch aussehen, und umgekehrt.

Achte auf plattgedrückte Kurven. Starke Vereinfachung macht aus sanften Kurven gerade Segmente. Bei einem Kreis fällt das sofort auf; bei einem Buchstaben zeigt es sich als leises Unbehagen, das du nicht gleich benennen kannst.

Achte auf die Ecken. Scharfe Ecken rundet die Vereinfachung oft als Erstes ab. Ein Quadrat, das an den Ecken leicht weich geworden ist, heißt: Du bist zu weit gegangen.

Grobe Orientierung, keine Grenzwerte: Ein einfaches Icon im niedrigen einstelligen Kilobytebereich und ein typisches Logo im niedrigen zweistelligen sind vernünftige Ergebnisse. Detaillierte Illustrationen liegen höher, und das ist in Ordnung.

Liegst du weit über dem, was sich für die Komplexität des Motivs richtig anfühlt, liegt die Lösung meist vorher und nicht im Optimierer. Vektorisiere mit weniger Farben, weniger Details oder vereinfache das Design selbst.

Barrierefreiheit. Ein Inline-SVG, das eine Bedeutung trägt, braucht ein <title>-Element, ein dekoratives braucht aria-hidden="true". Beides kostet nichts, und beides wird regelmäßig vergessen. Optimierer fügen das nicht für dich hinzu, und manche Konfigurationen entfernen ein <title>, das du hinzugefügt hast, wenn du es ihnen nicht ausdrücklich verbietest.

Mit Tracer steuerst du die Vektorisierung vor dem Export, und das ist die günstigste Optimierung, die es gibt. Kostenlos für SVG.