SVG-Optimierer & Bereiniger

SVG-Optimierung: Vektorminimierung und -bereinigung

Formel & Berechnungsmethode

Die größte Byteeinsparung bei der SVG-Optimierung ist das Runden von Gleitkommakoordinaten. Eine Koordinate wie „M 10,4857239 20,1239578“ kann auf „M 10,5 20,1“ gerundet werden, ohne dass sich die Form auf dem Bildschirm sichtbar ändert.

Best Practices & Tipps

• Unsichtbare Elemente entfernen: Designer blenden Ebenen häufig aus (z. B. „display: none“), anstatt sie vor dem Exportieren zu löschen. Der SVG-Optimierer entfernt diese verborgenen Ebenen und reduziert so sofort das Aufblähen von Dateien.
• Pfaddaten minimieren: Ein komplexes Vektorsymbol kann Hunderte von Pfadknoten haben. Durch das Entfernen unnötiger Leerzeichen und Kommas aus dem `d=`-Attribut wird die endgültige HTML-DOM-Größe drastisch reduziert.
• Verwenden Sie SVG-Sprites für Symbole: Wenn Sie dasselbe SVG-Symbol mehrmals auf einer Seite verwenden, integrieren Sie es nicht zehnmal. Optimieren Sie es einmal, platzieren Sie es in einem SVG „“ und referenzieren Sie es über „“, um enorme Bandbreite zu sparen.

Häufig gestellte Fragen

Wird sich durch die Optimierung das Aussehen meiner SVG-Datei ändern?

Im Allgemeinen nein. Wenn Sie jedoch die „Koordinatengenauigkeit“ für ein sehr kleines Symbol zu niedrig einstellen (z. B. auf 0 Dezimalstellen runden), rasten die Pfade möglicherweise an Rasterpunkten ein, wodurch das Symbol gezackt oder verzerrt aussieht.

Entfernt dieses Tool das viewBox-Attribut?

Nein. Durch das Entfernen der „viewBox“ wird die Fähigkeit des SVG beeinträchtigt, auf verschiedene Bildschirmgrößen reagieren zu können. Der Optimierer behält kritische Skalierungsattribute strikt bei.

Warum ist mein SVG immer noch so groß?

Wenn Ihr SVG ein eingebettetes Rasterbild enthält (ein „“-Tag), macht es den Zweck der Verwendung von Vektorgrafiken zunichte. Sie müssen das Bild zunächst in Ihrer Designsoftware in Vektorpfade umwandeln.