SVG komprimieren - und sehen, wohin jedes Byte ging
Die meisten SVG-Optimierer nennen dir eine einzige Zahl: 42 % kleiner. Diese Zahl verbirgt genau das, was du wissen musst - welcher Anteil davon aus gelöschten Einrückungen stammt, die niemand vermisst, und welcher aus gerundeten Koordinaten oder einer entfernten Beschriftung für Screenreader. Dieses Werkzeug meldet für jeden Schritt einen Byte-Wert, an deiner Datei, und lässt dich jeden davon abschalten. Es läuft vollständig in einem Web Worker auf deinem eigenen Gerät - als einziges Werkzeug unserer SVG-Reihe kann es das, weil Optimieren reine Textarbeit ohne Rendering ist. Nichts wird hochgeladen, und die Bereinigung läuft bei jeder Datei zuerst, ob du sie anforderst oder nicht, denn dieses Werkzeug gibt dir Quelltext zurück, und den fügst du in eine Seite ein.
So verwendest du dieses Tool
SVG-Dateien hineinziehen
Ziehe eine oder mehrere SVGs auf das Feld oben, bis 5 MB je Datei. Jede wird nach ihrem Inhalt geprüft und mit konkretem Grund abgelehnt, wenn sie keine echte SVG ist oder eine Entity-Expansions-Nutzlast enthält.
Schritte auswählen
Zwölf Schalter, alle standardmäßig an bis auf einen. Das Entfernen des <title>-Elements ist bewusst aus, denn das ist es, was ein Screenreader für deine Grafik vorliest - schaltest du es ein, warnt das Feld an Ort und Stelle, statt still vierzig Bytes gegen die Beschriftung zu tauschen.
Genauigkeit der Koordinaten einstellen
Der Regler bestimmt, wie viele Nachkommastellen in den Pfaddaten überleben, voreingestellt sind drei. Bei Editor-Exporten ist das oft die größte Einzelersparnis, denn Illustrator schreibt Koordinaten mit acht Nachkommastellen, die feiner sind als jeder Drucker auflösen kann.
Optimieren und vergleichen
Jede Datei zeigt das Original und die optimierte Fassung nebeneinander. Unterscheiden sich diese beiden Vorschaubilder je, hat ein Schritt etwas kaputt gemacht - diese Sichtprüfung gibt es genau dafür, damit du dem Ergebnis nie blind vertrauen musst.
Kopieren oder herunterladen
Kopiere den optimierten Quelltext direkt in die Zwischenablage zum Einfügen, oder lade ihn als Datei herunter. Bei mehreren umgewandelten Dateien nimmst du alles als ein einziges ZIP.
Häufig gestellte Fragen
Wie viel kleiner wird meine Datei wirklich?
Das hängt weit mehr davon ab, woher die Datei kommt, als von der Zeichnung. Wir haben vier gemessen: Ein Export im Illustrator-Stil ging von 1.091 auf 401 Bytes, 63 Prozent weniger. Ein Figma-Export von 730 auf 525, 28 Prozent. Das Lucide-Download-Symbol schaffte 4 Prozent, unser eigenes Seitenlogo nur 2.
Warum ist das Symbol kaum kleiner geworden?
Weil es schon optimiert war, bevor es bei uns ankam. Die Lucide-Datei ist 291 Bytes reine Geometrie ohne Kommentare, ohne Metadaten, ohne Editor-Attribute und mit kurzen Koordinaten - es gibt schlicht nichts, was ein Optimierer entfernen könnte, ohne das Bild zu verändern. Eine gute Symbolsammlung liefert Dateien, die bereits am Boden sind.
Welcher Schritt spart am meisten?
Beim Illustrator-Export: Das Entfernen des Metadatenblocks sparte 216 Bytes, das Runden der Koordinaten 131, Kommentare 94, Standardattribute 61, ungenutzte Definitionen 51, die XML-Deklaration 38 und die Umwandlung von style-Attributen 29. Beim Figma-Export sah es völlig anders aus - 141 seiner 205 gesparten Bytes kamen allein aus ungenutzten Definitionen.
Warum lässt Figma so viel Ungenutztes in der Datei?
Es exportiert die Ebenenstruktur, die es intern nutzt. Rahmen- und Ebenennamen werden zu id-Attributen, auf die nichts verweist, und Beschneidungspfade und Verläufe für die Zeichenfläche überleben oft in eine Datei, die nie auf sie zeigt. Diese IDs sind totes Gewicht, und sie zu entfernen ist der größte Einzelgewinn bei einem Figma-Export.
Ist es sicher, IDs zu entfernen?
Fast immer, mit einer Ausnahme, die man kennen sollte. Wir entfernen nur eine ID, auf die nichts in der Datei verweist, und wir prüfen url(#…)-Werte, href-Attribute und CSS in <style>. Was wir nicht sehen können, ist externes CSS oder JavaScript deiner Seite, das diese ID anspricht - schalte den Schritt dann ab.
Soll ich das <title>-Element entfernen?
Normalerweise nicht, deshalb ist es der einzige Schritt, der standardmäßig aus ist. <title> ist der zugängliche Name der Grafik: Ein Screenreader liest ihn vor, und ohne ihn ist das Bild für alle, die nicht hinsehen, namenlos. Die Ersparnis liegt typischerweise bei wenigen Dutzend Bytes, ein schlechter Tausch.
Kann das Runden der Koordinaten meine Zeichnung zerstören?
Bei drei Nachkommastellen und normaler Grafik nicht. Drei Stellen auf einem Symbol mit 24 Einheiten entsprechen etwa einem Vierzigtausendstel seiner Breite, das kann kein Bildschirm und kein Drucker zeigen. Schiebe den Regler bei kleiner viewBox auf null, und du siehst Formen einrasten - die Vorschau neben jeder Datei ist genau dafür da.
Woher weiß ich, dass die optimierte Datei noch gleich aussieht?
Auf zwei Wegen. Jede Datei zeigt Vorher und Nachher nebeneinander, und unsere Testreihe rendert beide Fassungen mehrerer echter Exporte und vergleicht sie Pixel für Pixel, mit höchstens ein paar Stufen Kantenglättungsdrift. Ein Schritt, der das Bild verändert, würde diesen Vergleich nicht bestehen.
Warum nicht svgo?
Sein Browser-Bundle zieht einen vollständigen CSS-Parser-Baum und eine Plugin-Architektur mit, von der wir ein Zehntel nutzen würden, und das landete bei jedem Besucher dieser Seite. Hier stecken die Schritte drin, die im echten Einsatz das meiste bringen, und sonst nichts - der Optimierer wird erst geladen, wenn du eine Datei ablegst.
Entfernt das Skripte und Tracking aus meiner SVG?
Ja, und dieser Schritt ist nicht abschaltbar. Skripte, Ereignis-Handler, entfernte Bildverweise und externe Stylesheet-Importe werden aus jeder Datei entfernt, und das Feld listet auf, was es gefunden hat. Hier zählt das mehr als bei unseren anderen SVG-Werkzeugen, denn dieses gibt dir Quelltext zum Einfügen in deine eigene Seite.
Macht gzip das überflüssig?
Nein, es verkleinert den Abstand nur. Dein Server komprimiert SVG beim Ausliefern fast sicher mit gzip oder brotli, und wiederholte Einrückung liegt Kompression gut. Was sie nicht kann: einen 216 Bytes großen Metadatenblock löschen oder achtstellige Koordinaten kürzen - dieser Inhalt muss weiterhin komprimiert und entpackt werden und kostet weiterhin Bytes.
Das könnte dich auch interessieren
Funktioniert etwas nicht? Fehler melden