SVG Optimizer
Understand SVG Optimizer
Entfernt Editor-Metadaten, Kommentare und ungenutzte Attribute aus SVG-Markup und weist die genaue Ersparnis in Byte aus.
How it works
Aus Inkscape, Illustrator, Figma oder Sketch exportiertes SVG trägt eine Menge Informationen, die der Browser nie liest: XML-Verarbeitungsanweisungen, einen DOCTYPE, Kommentare, einen `<metadata>`-Block mit RDF und ganze Namensräume editor-eigener Attribute wie `inkscape:label` und `sodipodi:docname`. Diese werden entfernt, einfache `style`-Deklarationen wie `style="fill: #5C5BFE"` werden zu Präsentationsattributen (`fill="#5C5BFE"`) befördert, `id`-Attribute, auf die nichts im Dokument verweist, entfallen, und Leerraum zwischen Tags wird zusammengefasst. Die Größen werden vorher und nachher in UTF-8-Bytes gemessen, der angezeigte Prozentwert ist also die echte Ersparnis auf der Leitung vor jeder Komprimierung.
When to use it
- Einen Icon-Satz säubern, bevor Sie ihn in eine Komponentenbibliothek einbetten oder ein Sprite-Sheet bauen
- Die Payload eines SVG verringern, das in HTML eingebettet wird, wo jedes Byte im kritischen Pfad liegt
- Den Dokumentnamen, die Ebenennamen und die Autorenangaben eines Editors entfernen, bevor Sie eine Datei veröffentlichen
- Ein maschinell erzeugtes SVG so lesbar machen, dass man es von Hand bearbeiten kann
Watch out for
- Eine `id`, auf die nur aus externem CSS oder JavaScript verwiesen wird, wirkt ungenutzt und wird entfernt. Spricht Ihr Stylesheet `#logo-path` an oder ruft Ihr Skript `getElementById` auf, prüfen Sie die Ausgabe, bevor Sie sie ausliefern.
- Inline-`style` zu Attributen zu befördern senkt dessen Spezifität. Ein Inline-Style schlägt jede Stylesheet-Regel; ein Präsentationsattribut unterliegt ihnen allen, eine zuvor überschriebene Regel kann jetzt also gewinnen.
- Pfaddaten bleiben unangetastet. Koordinaten werden nicht gerundet, Pfade nicht zusammengeführt und Formen nicht umgewandelt – die größten Einsparungen in einer detaillierten Illustration erfordern einen vollwertigen Optimierer wie SVGO.
- Die Byte-Ersparnis schrumpft nach gzip oder brotli. Sich wiederholende Metadaten lassen sich gut komprimieren, aus 60 % roher Reduktion werden über das Netz also womöglich eher 25 %.
Not the right tool for: Nicht vertrauenswürdiges SVG zu bereinigen. Dies ist ein Optimierer für die Größe und kein Sicherheitsfilter – ein von Nutzern angenommenes SVG kann `<script>`, Event-Handler und `foreignObject` enthalten und muss serverseitig bereinigt werden, bevor es überhaupt dargestellt wird.
Frequently Asked Questions
Wie stark verkleinert die SVG-Optimierung die Dateigröße?
Übliche Reduktionen liegen bei 20–70 %. SVGs, die aus Inkscape, Adobe Illustrator oder Figma exportiert werden, enthalten umfangreiche Editor-Metadaten, Kommentare und überflüssige Attribute. Aus einem exportierten SVG von 50 KB werden nach der Optimierung oft 10–20 KB – bei Icon-Sprites eine entscheidende Verbesserung.
Zerstört die Optimierung meine SVG-Animationen?
Möglicherweise. Dieser Optimierer entfernt id-Attribute, für die er keinen Verweis per url(#id) oder href="#id" sieht; CSS oder JavaScript, das ein Element über seine ID anspricht, findet es danach womöglich nicht mehr. Klassenbasierte CSS-Animationen und SMIL innerhalb der Datei bleiben unberührt. Prüfen Sie die Ausgabe, bevor Sie ein animiertes SVG ersetzen.
Was ist der Unterschied zwischen Minifizierung und Optimierung?
Minifizierung entfernt nur Leerraum und Kommentare. Optimierung schreibt zusätzlich Inhalte um: Editor-Metadaten entfallen, einfache style-Eigenschaften werden zu Präsentationsattributen, und nicht referenzierte IDs werden entfernt. Dieses Tool tut beides. Es führt keine Pfade zusammen, klappt keine Gruppen zusammen und wandelt keine Formen in Pfade – das macht SVGO.
How to Use SVG Optimizer
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.