SVG-Optimierer

Was ist SVG-Optimierer?

Der SVG-Optimierer ist ein kostenloses Browser-Tool für Webdesigner, Icon-Autoren und Frontend-Entwickler, die handgeschriebenes oder exportiertes SVG vor dem Ausliefern verschlanken müssen. Vektoreditoren fügen unsichtbaren Ballast hinzu: XML-Kommentare, Metadatenblöcke, Inkscape/Sodipodi/Illustrator-Attribute, überflüssige Dezimalstellen, wirkungslose Transformationen, Wrapper-Gruppen sowie IDs und defs, die nichts referenziert. Schalte jede Bereinigung in den Einstellungen um, füge das Markup ein oder lege eine .svg-Datei ab, beobachte, wie sich die Renders Original und Optimiert nebeneinander aktualisieren, und lies die Statistiken Vorher, Nachher, Gespart, Gzip und Brotli. Kopiere das Ergebnis oder lade es als .min.svg herunter. Nutze es, um Inline-Icons, Sprite-Sheets, Logos und Illustrationen zu verschlanken.

So verwendest du SVG-Optimierer

1. Füge dein SVG ein oder lege/lade eine .svg-Datei ab — das Markup füllt das Eingabefeld.
2. Öffne die Einstellungen und schalte genau die Bereinigungen ein: Koordinaten runden, Kommentare, Metadaten und Editor-Attribute entfernen, leere Gruppen, ungenutzte IDs und defs, Transformationen zusammenfassen, Inline-Stile minifizieren, Hex-Farben kürzen, Standardwerte entfernen und Leerraum minifizieren.
3. Wenn das Runden aktiv ist, lege die Genauigkeit fest (0-5 Nachkommastellen).
4. Vergleiche die Renders Original und Optimiert nebeneinander, um zu bestätigen, dass die Grafik noch stimmt.
5. Lies die Statistiken Vorher, Nachher, Gespart, Gzip und Brotli, um den echten Größengewinn zu sehen.
6. Kopiere das optimierte SVG oder lade es als .min.svg-Datei herunter.

Beispiele

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

Häufig gestellte Fragen

Was genau entfernt der Optimierer?

Mit den passenden Schaltern: XML-Kommentare, die Elemente <metadata>, <title> und <desc>, Editor-Namespace-Attribute (Inkscape, Sodipodi, Illustrator), leere Gruppen, IDs, die nichts referenziert, und nicht referenzierte <defs>. Er kann außerdem numerische Attribute und Pfaddaten runden, wirkungslose Transformationen zusammenfassen, style-Attribute und <style>-CSS minifizieren, Hex-Farben kürzen (#ffffff→#fff) und Standard-Präsentationsattribute wie fill-opacity="1" entfernen.

Verändert das Runden der Koordinaten das Aussehen meines SVG?

Das Runden auf niedrige Genauigkeit kann Punkte um einen winzigen Bruchteil verschieben, meist unsichtbar, aber kleiner. Erhöhe die Genauigkeit (bis 5 Stellen) für exakte Geometrie, oder schalte das Runden aus, um die Zahlen unberührt zu lassen.

Kann ich eine Datei laden und das Ergebnis ansehen?

Ja. Lege oder lade eine .svg-Datei ab (oder füge das Markup ein), und die Renders Original und Optimiert erscheinen nebeneinander, sodass du Fehler sofort siehst. Kopiere dann die Ausgabe oder lade das optimierte .min.svg herunter — nichts wird hochgeladen; die Datei wird lokal gelesen.

Was bedeuten die Zahlen für Gzip und Brotli?

Die Gzip-Größe wird gemessen, indem das optimierte SVG tatsächlich im Browser komprimiert wird, und spiegelt so die echten Bytes über eine gzip-Verbindung wider. Die Brotli-Zahl ist eine Schätzung aus dieser Gzip-Größe (Brotli komprimiert Text meist etwas kleiner); ein echter Brotli-Encoder ist zu schwer zum Bündeln, daher ist sie mit einer Tilde markiert.

Wird mein SVG irgendwohin hochgeladen?

Nein. Parsen, Bereinigung, Größenmessung und Serialisierung geschehen alle lokal in deinem Browser mit dem integrierten DOMParser. Es wird nichts an einen Server gesendet, sodass das Tool offline funktioniert und deine Grafik privat bleibt.