svgo — SVG-Dateien optimieren und verkleinern

svgo ist der De-facto-Standard, um SVG-Dateien zu optimieren: Das Node.js-Werkzeug entfernt Kommentare, Editor-Metadaten und überflüssige Präzision, fasst Pfade zusammen und drückt die Dateigröße so oft um die Hälfte – meist ohne sichtbaren Qualitätsverlust. Du startest es global installiert (npm i -g svgo) oder direkt via npx svgo, optimierst einzelne Dateien oder ganze Ordner und steuerst jedes Detail über Plugins in einer svgo.config.js. Achte aber darauf: Ohne -o schreibt svgo in-place und überschreibt das Original – lege also vorher ein Backup an.

Grundlegende Verwendung

svgo <input.svg> — Optimiert eine SVG-Datei in-place (überschreibt das Original).

svgo icon.svg

svgo <input.svg> -o <output.svg> — Optimiert und schreibt in eine andere Datei.

svgo logo.svg -o logo.min.svg

svgo -i <input.svg> -o <output.svg> — Explizite Flags für Eingabe und Ausgabe.

svgo -i src/logo.svg -o dist/logo.svg

svgo -f <directory> — Optimiert alle SVGs in einem Verzeichnis (in-place).

svgo -f icons/

svgo -f <input-dir> -o <output-dir> — Optimiert ein Verzeichnis voller SVGs in ein separates Ausgabeverzeichnis.

svgo -f src/icons/ -o dist/icons/

svgo -s '<svg>...</svg>' — Optimiert einen SVG-String direkt.

svgo -s '<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>'

cat <input.svg> | svgo -i - -o - — Liest von stdin, schreibt nach stdout (für Pipelines).

cat icon.svg | svgo -i - -o - > icon.min.svg

Ausgabeoptionen

svgo --pretty <input.svg> -o <output.svg> — Gibt die Ausgabe formatiert mit Einrückung aus.

svgo --pretty logo.svg -o logo.clean.svg

svgo --indent <n> --pretty <input.svg> -o <output.svg> — Setzt die Einrückungstiefe für die formatierte Ausgabe (Standard: 4).

svgo --indent 2 --pretty logo.svg -o logo.clean.svg

svgo --final-newline <input.svg> -o <output.svg> — Stellt sicher, dass die Ausgabe mit einem Zeilenumbruch endet.

svgo --final-newline icon.svg -o icon.min.svg

svgo -r -f <directory> — Optimiert SVGs rekursiv in Unterverzeichnissen.

svgo -r -f assets/

Konfiguration

svgo --config <config.js> <input.svg> — Verwendet eine eigene Konfigurationsdatei.

svgo --config svgo.config.js icon.svg

svgo -p <n> <input.svg> — Überschreibt die Zahl der Nachkommastellen (Präzision) für alle Plugins.

svgo -p 2 icon.svg

svgo -f <directory> --exclude <pattern> — Schließt Dateien aus, die auf ein Regex-Muster passen (nur zusammen mit -f).

svgo -f icons/ --exclude 'sprite.*\.svg'

svgo --datauri <format> <input.svg> — Gibt das Ergebnis als Data-URI aus (base64, enc oder unenc).

svgo --datauri base64 icon.svg -o icon.txt

svgo --multipass <input.svg> — Führt mehrere Optimierungsdurchläufe aus, bis keine Einsparung mehr möglich ist.

svgo --multipass complex-graphic.svg

svgo --show-plugins — Listet alle verfügbaren eingebauten Plugins auf.

svgo --show-plugins

Konfigurationsdatei (svgo.config.js)

module.exports = { plugins: ['preset-default'] } — Minimal-Konfiguration mit dem Standard-Preset (alle Standard-Plugins).

// svgo.config.js
module.exports = { plugins: ['preset-default'] }

{ name: 'preset-default', params: { overrides: { removeViewBox: false } } } — Standard-Preset, aber removeViewBox deaktiviert (wichtig für responsive SVGs).

module.exports = { plugins: [{ name: 'preset-default', params: { overrides: { removeViewBox: false } } }] }

{ name: 'preset-default', params: { overrides: { cleanupIds: false } } } — IDs unangetastet lassen (nötig, wenn SVG-Elemente aus CSS/JS referenziert werden).

module.exports = { plugins: [{ name: 'preset-default', params: { overrides: { cleanupIds: false } } }] }

{ name: 'removeAttrs', params: { attrs: '(fill|stroke)' } } — Bestimmte Attribute entfernen (z. B. für CSS-gesteuerte Icons).

module.exports = { plugins: ['preset-default', { name: 'removeAttrs', params: { attrs: '(fill|stroke)' } }] }

{ name: 'addAttributesToSVGElement', params: { attributes: [{ 'aria-hidden': 'true' }] } } — Attribute zum Wurzel-SVG-Element hinzufügen.

module.exports = { plugins: ['preset-default', { name: 'addAttributesToSVGElement', params: { attributes: [{ 'aria-hidden': 'true' }] } }] }

{ name: 'sortAttrs' } — Element-Attribute für eine konsistente Ausgabe sortieren.

module.exports = { plugins: ['preset-default', 'sortAttrs'] }

{ name: 'removeDimensions' } — width/height entfernen und viewBox ergänzen, falls nicht vorhanden (für responsive SVGs).

module.exports = { plugins: ['preset-default', 'removeDimensions'] }

Wichtige Standard-Plugins

removeDoctype — Entfernt die DOCTYPE-Deklaration.

Removes: <!DOCTYPE svg PUBLIC ...>

removeXMLProcInst — Entfernt XML-Verarbeitungsanweisungen.

Removes: <?xml version="1.0" encoding="UTF-8"?>

removeComments — Entfernt alle XML-Kommentare.

Removes: <!-- Created with Illustrator -->

removeMetadata — Entfernt -Elemente.

Removes: <metadata>...</metadata>

removeEditorsNSData — Entfernt Editor-Namespace-Daten (Inkscape, Sketch, Illustrator).

Removes: inkscape:*, sodipodi:*, sketch:* attributes

cleanupIds — Verkleinert und dedupliziert Element-IDs.

Renames: id="SVGID_1_" → id="a"

removeUselessDefs — Entfernt ohne Referenzen.

Removes unused gradient, filter, or symbol definitions

collapseGroups — Löst überflüssige -Wrapper-Gruppen auf.

Removes: <g><rect.../></g> → <rect.../>

mergePaths — Führt mehrere -Elemente zusammen, wo möglich.

Combines adjacent paths with same attributes

convertPathData — Optimiert Pfaddaten: entfernt redundante Befehle, rundet Werte.

M10.123 20.456 → M10.1 20.5

Typische Anwendungsfälle

svgo -f icons/ -o icons/ --config svgo.config.js — Optimiert alle Icons mit einer projektspezifischen Konfiguration.

svgo -f src/icons/ -o dist/icons/ --config svgo.config.js

find . -name '*.svg' -exec svgo {} \; — Optimiert alle SVGs rekursiv in Unterverzeichnissen.

find assets/ -name '*.svg' -exec svgo --multipass {} \;

svgo -f <directory> --config icons.config.js — Sichere Optimierung für Icon-Systeme (viewBox und IDs per Konfiguration erhalten).

svgo -f components/icons/ --config icons.config.js

svgo --multipass --pretty --indent 2 -o <output.svg> <input.svg> — Maximale Optimierung mit lesbarer Ausgabe (für versionierte SVGs).

svgo --multipass --pretty --indent 2 -o logo.svg raw-logo.svg

npx svgo <input.svg> -o <output.svg> — Ausführen ohne globale Installation via npx.

npx svgo logo.svg -o logo.min.svg

npx svgo@latest -f <directory> — Neueste Version ohne Installation ausführen.

npx svgo@latest -f icons/

Fazit

svgo gehört in jeden Frontend-Build: Ein einziger Lauf entfernt Editor-Ballast, kürzt Pfaddaten und spart spürbar Bytes – für den Alltag reichen svgo datei.svg -o datei.min.svg, der Ordner-Modus -f und eine svgo.config.js. Sei dir aber der Stolpersteine bewusst: Ohne -o arbeitet svgo in-place und überschreibt das Original, also vorher sichern. Aggressive Voreinstellungen können SVGs zerstören – removeViewBox bricht die Skalierung responsiver Grafiken (meist deaktivieren), eine zu niedrige floatPrecision führt zu sichtbaren Verformungen, und cleanupIds kann Referenzen aus Animationen, <use> oder externem CSS/JS kaputt machen. Steuere solche Plugins gezielt über die Konfiguration. Hinweis: Die alten CLI-Flags --enable/--disable aus svgo 1.x sind seit Version 2/3 entfallen – Plugins werden ausschließlich über die svgo.config.js konfiguriert.

Weiterführende Links

svgo bei GitHub – Quellcode, Plugin-Referenz und vollständige Konfigurationsdokumentation
MDN: SVG – deutschsprachige Referenz zum SVG-Format und seinen Elementen