SVG-Optimierer Online

In der großen Mehrheit der Fälle nein. Die sicheren Optimierungen des Tools (Entfernung von Metadaten, Kommentaren, versteckten Elementen, redundanten Attributen und Pfadvereinfachung ohne Präzisionsverlust) beeinflussen das visuelle Erscheinungsbild nicht. Es gibt jedoch eine kleine Gruppe von Optimierungen, die in Grenzfällen Änderungen verursachen können: die Reduzierung der Dezimalpräzision bei Koordinaten kann die Form sehr detaillierter Pfade leicht beeinflussen (obwohl in den meisten Fällen visuell nicht wahrnehmbar), und das Entfernen bestimmter CSS-Attribute kann SVGs mit komplexen Stilen beeinflussen. Für SVGs, die als einfache Icons oder statische Illustrationen verwendet werden, ist die Optimierung völlig sicher. Für SVGs mit CSS- oder JavaScript-Animationen, die auf bestimmte IDs oder Klassen basieren, wird empfohlen, das Ergebnis vor der Verwendung in der Produktion zu überprüfen.

Die SVG-Optimierung entfernt alles, was für das visuelle Rendering unnötig ist. In der Kategorie unnötige Metadaten: <?xml version='1.0'?>-Deklarationen, DOCTYPE-Deklarationen, Kommentare (außer Lizenzkommentaren), XML-Metadaten-Elemente sowie Inkscape- (inkscape:, sodipodi:), Adobe Illustrator- (ai:, i:) und CorelDRAW-Namespaces. In der Kategorie redundante Attribute: Attribute mit Standardwerten (z. B. fill='black', wenn Schwarz bereits der Standard ist), Style-Attribute, die konsolidiert werden können. In der Kategorie Geometrie: Pfade mit redundanten Befehlen, leere Teilpfade und Identitätstransformationen (transform='translate(0,0)'). Die Pfadoptimierung konvertiert Bezier-Kurven in kürzere Formen und reduziert die Dezimalpräzision der Koordinaten.

Die Einsparungen variieren stark je nach SVG-Quelle. Aus Adobe Illustrator exportierte SVGs sind bekanntermaßen aufgebläht: Sie können zig Kilobytes an Anwendungsmetadaten, versteckten Ebenen, ungenutzten Definitionen und nicht optimierten Pfaden enthalten. Ein einfaches Icon aus Illustrator bei 50 KB kann nach der Optimierung auf 3-5 KB reduziert werden (mehr als 90% Reduzierung). Figma-SVGs sind sauberer, haben aber noch Optimierungspotenzial: Reduzierungen von 30-50% sind üblich. Inkscape-SVGs haben anwendungsspezifische Metadaten (sodipodi- und inkscape-Namespaces), die für die Produktion unnötiges Gewicht hinzufügen: typisch sind 40-60% Reduzierungen. Für bereits manuell optimierte SVGs sind die Gewinne kleiner (10-20%).

Absolut. Nicht optimierte SVGs haben direkte Auswirkungen auf die Web-Performance. Eine 80-KB-SVG vs. eine optimierte 8-KB-SVG bedeutet 10x weniger Daten, die der Browser herunterladen, parsen und rendern muss. Der Einfluss ist besonders bei mobilen Geräten mit langsamen Verbindungen merklich. Für SVG-Icons (die häufigsten im Web) sollte die optimale Größe nach der Optimierung unter 1 KB für einfache Icons und unter 10 KB für komplexe Illustrationen liegen. Über die direkte Größenreduzierung hinaus komprimieren optimierte SVGs mit gzip oder Brotli besser (HTTP-Komprimierungsalgorithmen), da sauberere Dateien geringere Entropie haben. Performance-Audit-Tools wie Googles Lighthouse bestrafen nicht optimierte Assets, einschließlich übergroßer SVGs, in ihren Performance-Scores.

Ja, bestimmte aggressive Optimierungen können SVGs mit Interaktivität beschädigen. Die Hauptfälle sind: (1) ID-Entfernung: wenn eine SVG CSS- oder JavaScript-Animationen hat, die Elemente über ihre ID referenzieren (document.getElementById oder CSS-Animation mit an IDs gebundenen Keyframes), wird das Entfernen dieser IDs die Funktionalität beschädigen. (2) Klassen-Entfernung: ähnlich dem vorherigen Fall mit CSS-Klassen. (3) Gruppen-Zusammenführung: das Zusammenführen von g-Gruppen kann die Renderreihenfolge ändern oder Referenzpunkte für Animationen beseitigen. (4) Style-Inlining: das Konvertieren von CSS-Klassen in Inline-Style-Attribute kann externe CSS beeinflussen, die auf diese Klassen abzielt. Für animierte oder interaktive SVGs empfiehlt sich ein konservatives Optimierungsprofil, das IDs und Klassen beibehält.

SVGO (SVG Optimizer) ist das am häufigsten verwendete SVG-Optimierungs-Tool im JavaScript/Node.js-Ökosystem. Es wurde 2012 von Kir Belevich erstellt und ist als npm-Paket verfügbar (npm install -g svgo). SVGO verwendet eine Plugin-Architektur: Jeder Optimierungstyp ist ein unabhängiges Plugin, das einzeln aktiviert oder deaktiviert werden kann. Plugins sind in zwei Kategorien unterteilt: preset-default (standardmäßig aktivierte Plugins, als sicher angesehen) und optionale Plugins (aggressiver, standardmäßig deaktiviert). SVGO v3 (2022 veröffentlicht) ist die aktuelle Version mit voller SVG 2.0-Unterstützung. Das Tool integriert sich in die beliebtesten Build-Systeme: svgo-loader für webpack, @svgr/webpack für React (das SVGO intern verwendet), vite-plugin-svgo für Vite. Im Jahr 2020 erstellte Jake Archibald SVGOMG, eine Web-Oberfläche für SVGO, die das Visualisieren des Ergebnisses und das interaktive Anpassen von Plugins ermöglicht.