SVG Optimizer
Bereinigen Sie Vektor-Markup, bevor es in einer Komponente, einem Icon-Set oder einem statischen Asset-Bundle landet.
Optimierungseinstellungen
Niedrigere Präzision kann die Datei weiter verkleinern, zu aggressives Runden kann aber Pfade verzerren. Ein Wert von 2 oder 3 ist ein guter Standard.
Wie SVG-Optimierung funktioniert
Nicht gerenderte Daten entfernen
Design-Exporte enthalten oft Metadaten, Kommentare, Editor-Namespaces und unsichtbares Markup, das Bytes hinzufügt, ohne das gerenderte Bild zu verändern.
Pfadpräzision reduzieren
Koordinaten wie 10.5432109 lassen sich oft auf 10.54 runden, ohne sichtbaren Unterschied, besonders bei Icons in kleinen Größen.
Vor dem Ausliefern prüfen
Optimierung sollte viewBox, Füllungen, Konturen, ARIA-Labels und wichtige IDs erhalten, wenn sie Rendering, Styling, Animation oder Barrierefreiheit beeinflussen.
Häufige Fragen
Wird das optimierte SVG unscharf?
Nein. SVG ist vektorbasiert, Optimierung kürzt Markup statt das Bild zu rastern. Das eigentliche Risiko ist zu aggressives Runden von Pfadwerten.
Warum kann ein optimiertes SVG manchmal größer werden?
Wenn die Originaldatei bereits stark komprimiert oder manuell optimiert wurde, bleibt kaum etwas zu entfernen. In solchen Fällen kann die Ausgabe ähnlich groß oder gelegentlich etwas größer sein.
Unterstützt diese Seite Batch-Optimierung?
Diese Seite ist für Einzeldatei-Inspektion und Feintuning gedacht. Für Batch-Optimierung eignet sich ein Build-Step-Tool wie SVGO in Ihrer Pipeline.
Kann SVG-Optimierung Animationen oder Styling brechen?
Ja, wenn ein Optimizer IDs, Klassen, Metadaten oder Präzision entfernt, auf die CSS oder JavaScript angewiesen sind. Prüfen Sie das Ergebnis und behalten Sie wichtige Attribute, wenn das SVG interaktiv ist.
Sollten dekorative SVGs Accessibility-Labels enthalten?
Dekorative SVGs können meist vor assistiver Technologie versteckt werden. Informative Icons und Illustrationen sollten sinnvolle Titel, Labels oder begleitenden Text behalten.