Optimieren Sie ein SVG in Ihrem Browser und kopieren Sie es als optimierte Datei, als Data-URI oder als CSS-Hintergrund – auf Basis von SVGO, ohne dass etwas hochgeladen wird. Legen Sie ein Icon ab oder fügen Sie es ein, passen Sie die Einstellungen an und holen Sie sich die kleinste Inline-Form für CSS, HTML oder Ihr Design-System.
So funktioniert es
Das Werkzeug lädt SVGO – den Standard-SVG-Optimierer, dieselbe Engine hinter SVGOMG – einmalig von einem öffentlichen CDN und läuft danach vollständig auf Ihrem Gerät. Es entfernt Editor-Metadaten, Kommentare und redundante Daten und rundet Koordinaten auf eine von Ihnen gewählte Präzision. Der optimierte Code wird anschließend in vier gebrauchsfertigen Formen angeboten, zusammen mit einer Live-Vorschau und der Größe vorher/nachher.
Schritte
- Legen Sie eine
.svg-Datei auf den Uploader oder fügen Sie Ihren SVG-Code in das Quellfeld ein. - Passen Sie die Optimierungsschalter an – senken Sie die Präzision für kleinere Dateien oder belassen Sie die sicheren Standardwerte.
- Beobachten Sie, wie sich Vorschau und Größenreduktion live aktualisieren.
- Kopieren Sie die benötigte Form (SVG, Data-URI oder CSS) oder laden Sie das optimierte
.svgherunter.
Ausgabeformen – welche kopieren
| Ausgabe | Am besten für | Hinweise |
|---|---|---|
| Optimiertes SVG | Commit in ein Repository, Icon-Systeme, <img src> | Sauberste Quelle; herunterladen oder kopieren |
| Data-URI (URL-codiert) | CSS-background-image, Inline-HTML | Kleinster Data-URI für SVG (~20–30 % unter Base64) |
| Data-URI (Base64) | Maximale Kompatibilität, ältere Werkzeuge | Größer, muss aber nie escaped werden |
| CSS-Snippet | Direkt in ein Stylesheet einfügen | Umschließt den URL-codierten Data-URI mit background-image |
Wann URL-codiert oder Base64 verwenden
SVG ist Text, und Base64 bläht Text um etwa ein Drittel auf. Speziell für SVG ist der URL-codierte Data-URI kleiner und in CSS und HTML genauso gültig, daher ist er die Standardwahl für einen CSS-Hintergrund. Greifen Sie nur dann zu Base64, wenn ein Build-Werkzeug oder eine Plattform die reservierten Zeichen in einem URL-codierten URI verfälscht.
Optimierungseinstellungen
| Einstellung | Standard | Was sie bewirkt |
|---|---|---|
| Präzision | 3 | Koordinaten-/Zahlenpräzision (0–8). Der größte Größenhebel; zu niedrig verzerrt Kurven |
| Mehrfachdurchlauf | Ein | Wiederholt Durchläufe, bis die Ausgabe nicht weiter schrumpft |
| Kommentare / Metadaten entfernen | Ein | Entfernt <!-- --> und <metadata> / Editor-Ballast |
| IDs bereinigen | Ein | Minimiert und entfernt ungenutzte ids |
| viewBox entfernen | Aus | Das Entfernen bricht die responsive Skalierung – der klassische SVGO-Fallstrick |
| width/height entfernen | Aus | Lässt CSS das Icon über viewBox dimensionieren |
<title> / <desc> entfernen | Aus | Für die Barrierefreiheit standardmäßig beibehalten |
| Attribute sortieren | Aus | Deterministische Attributreihenfolge für besseres gzip und bessere Diffs |
Beispiel
Ein 2,1 KB großes Icon, das aus einem Design-Werkzeug exportiert wurde – voller Editor-Metadaten, Kommentare und 6-stelliger Koordinaten – schrumpft mit den Standardwerten typischerweise auf deutlich unter 1 KB und dann zu einer Inline-Zeichenkette data:image/svg+xml,..., die Sie ohne zusätzliche Anfrage direkt in eine CSS-Regel einfügen können.
Privat durch Design
Ihr SVG verlässt niemals Ihren Browser. Vom CDN wird nur der Code von SVGO abgerufen (einmalig, danach im Cache); das Markup, das Sie einfügen oder ablegen, wird lokal optimiert, sodass es für interne Icons und noch nicht veröffentlichte Marken-Assets sicher ist.
