SVG-Optimierer
Dateien hier ablegen oder klicken, um auszuwählen
- Sicher
- Die Verarbeitung läuft auf deinem Gerät, daher werden Ein-/Ausgaben nirgendwohin gesendet.
Erklärung
Analysiert die SVG-Struktur und entfernt unnötigen Code, soweit dies die Darstellung nicht beeinflusst. Stile werden aufgelöst, Größenangaben optimiert, Attribute reduziert und Zahlen- sowie Pfaddaten vereinfacht, um die Dateigröße bei gleichbleibender visueller Qualität wirksam zu senken.
Was bei der Optimierung geschieht
| Stile | CSS aus <style> wird soweit möglich in style-Attribute der einzelnen Elemente übernommen. Anschließend kann es weiter in Präsentationsattribute wie fill und stroke umgewandelt werden. Leere und nicht mehr benötigte <style>-Elemente werden entfernt. |
|---|---|
| Größenangaben | Entfernt width- und height-Deklarationen aus style sowie die entsprechenden Attribute des <svg>-Wurzelelements. Das für responsive Darstellung erforderliche viewBox bleibt erhalten. |
| Attribute | Entfernt unnötige Attribute, die von Designprogrammen wie Figma, Adobe XD oder Illustrator hinzugefügt wurden, etwa data-name. Auch id und class können entfernt werden, wenn sie nicht referenziert werden oder durch das Zusammenführen bzw. Umwandeln von Elementen, z. B. von <line> zu <path>, überflüssig werden. |
| Referenzen | Prüft Referenzattribute wie filter, clip-path und mask und entfernt sie, wenn das referenzierte Ziel nicht existiert. Gültige Referenzen, die das Erscheinungsbild beeinflussen, bleiben erhalten. |
| Zahlen und Pfade | Vergleicht die Darstellung verschiedener Rundungsgenauigkeiten (floatPrecision) und wählt automatisch die kleinste Einstellung mit minimalen sichtbaren Abweichungen. Außerdem werden Pfaddaten wie das d-Attribut von <path> vereinfacht, unnötige Leerzeichen und Redundanzen entfernt und die Optimierung mit multipass mehrfach ausgeführt, um die Dateigröße möglichst stark zu reduzieren. |
| Kompatibilität | Um Darstellungsfehler zu vermeiden, bleibt viewBox erhalten. Enthält das SVG <text>-Elemente, wird auch xml:space zur Steuerung von Leerzeichen beibehalten; ohne <text> kann es entfernt werden. Bei animierten SVGs werden vorsichtshalber einige Optimierungen ausgelassen. Komplexes CSS, das sich nur schwer inline umwandeln lässt, kann ebenfalls erhalten bleiben, damit das ursprüngliche Erscheinungsbild nicht verändert wird. |
Hinweise
Je nach SVG-Struktur und Markup können sich Kompressionsrate und Ergebnis unterscheiden. Stile, die sich nicht zuverlässig automatisch auflösen oder inline umwandeln lassen, etwa komplexe Selektoren oder Media Queries, können zugunsten einer korrekten Darstellung beibehalten werden.
Wenn Elemente zusammengeführt oder umgewandelt werden, etwa von <line> zu <path>, können id und class der ursprünglichen Elemente entfernt werden, falls sie durch die Strukturänderung nicht mehr benötigt werden.
Referenzattribute wie filter, clip-path und mask werden automatisch entfernt, wenn ihr Ziel nicht existiert, etwa bei ungültigen url(#...)-Verweisen. So bleibt das SVG konsistent.
SVGs mit Animationen, etwa CSS-Animationen oder <animate>-Tags, können optimiert werden. Einige Schritte werden jedoch ausgelassen, da Animationen leicht beeinträchtigt werden können. Enthält das SVG Skripte (JS), kann die Optimierung zu unerwartetem Verhalten führen.