Kleinere SVG-Dateien, die genau gleich aussehen
SVGs aus Illustrator, Figma, Inkscape oder Sketch schleppen viel Ballast mit, den der Browser nie zeichnet: Editor-Metadaten, Kommentare, ausgeblendete Ebenen, Zahlen mit acht Nachkommastellen, Gruppen in Gruppen. Dieser Optimierer führt SVGO – das Standardwerkzeug zur SVG-Optimierung – in Ihrem Browser aus, um ihn zu entfernen, und zeigt das Ergebnis neben dem Original, damit Sie sehen, dass sich nur die Größe geändert hat.
So optimieren Sie ein SVG
- 1Legen Sie eine oder mehrere SVG-Dateien ab, wählen Sie sie aus oder fügen Sie SVG-Markup ein.
- 2Prüfen Sie die Vorher-Nachher-Vorschau und die eingesparte Größe jeder Datei.
- 3Senken Sie die Genauigkeit für kleinere Dateien; erhöhen Sie sie, wenn Kurven falsch aussehen.
- 4Schalten Sie einzelne SVGO-Plugins ein oder aus – entfernen Sie zum Beispiel width und height, damit das SVG per CSS skaliert.
- 5Laden Sie das optimierte SVG herunter, kopieren Sie das Markup oder laden Sie alle Dateien auf einmal als ZIP herunter.
Was entfernt wird
- Editor-Daten
- Metadaten, Kommentare, die XML-Deklaration und der Doctype sowie die Namensräume und Attribute, die Inkscape, Illustrator und Sketch für sich selbst einfügen.
- Überflüssiges Markup
- Leere Gruppen und Attribute, Standardwerte, ausgeblendete Elemente, ungenutzte Definitionen und IDs sowie Gruppen, die nur ein einziges Element umschließen.
- Umständliche Geometrie
- Pfaddaten werden mit relativen Befehlen und weniger Ziffern neu geschrieben, Formen werden zu kürzeren Pfaden, und Transformationen werden nach Möglichkeit in die Koordinaten eingerechnet.
Sichere Standards, stärkere Optionen
Der Standardsatz ist das eigene Preset von SVGO, das so gewählt ist, dass das Bild unverändert bleibt. Die Zusatzoptionen gehen weiter, ändern aber mehr als die Größe: Ohne width und height füllt ein SVG seinen Container, ohne Titel ist sein Name für Screenreader verborgen, und das Entfernen von xmlns eignet sich nur für SVG, das inline in HTML eingefügt wird.
Um zuerst eine Bitmap in ein SVG umzuwandeln, nutzen Sie den Bildkonverter, der sein SVG direkt hierher schicken kann; um das Ergebnis einzubetten, nutzen Sie Bild zu Base64.
Häufige Fragen
- Ist das dasselbe wie SVGO oder SVGOMG?
- Hier läuft SVGO selbst, dieselbe Engine, die SVGOMG verwendet, mit ihrem Standard-Preset und denselben Plugins als Schalter. Alles läuft in Ihrem Browser.
- Verändert die Optimierung das Aussehen meines SVG?
- Nicht mit den Standardeinstellungen. Eine sehr niedrige Genauigkeit kann feine Kurven verbiegen, und einige Zusatzoptionen ändern Größenverhalten oder Barrierefreiheit – die Vorher-Nachher-Vorschau zeigt den Unterschied sofort.
- Kann ich mehrere SVG-Dateien auf einmal optimieren?
- Ja. Legen Sie so viele ab, wie Sie möchten, ändern Sie die Einstellungen einmal für alle und laden Sie sie zusammen als ZIP herunter.
- Warum wird die gzip-Größe angezeigt?
- Webserver senden SVG meist mit gzip komprimiert, daher liegt dieser Wert näher an dem, was Besucher tatsächlich herunterladen.
- Werden meine Dateien hochgeladen?
- Nein. SVGO läuft in Ihrem Browser, und die Dateien verlassen nie Ihr Gerät.