# svgo — SVG-Dateien optimieren und verkleinern > Praxis-Guide zu svgo: SVG-Dateien optimieren, Metadaten entfernen und die Dateigröße verkleinern – per CLI, npx und svgo.config.js. Source: https://www.jpkc.com/db/cheatsheets/images-media/svgo/ 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 ` — Optimiert eine SVG-Datei in-place (überschreibt das Original). ```bash svgo icon.svg ``` `svgo -o ` — Optimiert und schreibt in eine andere Datei. ```bash svgo logo.svg -o logo.min.svg ``` `svgo -i -o ` — Explizite Flags für Eingabe und Ausgabe. ```bash svgo -i src/logo.svg -o dist/logo.svg ``` `svgo -f ` — Optimiert alle SVGs in einem Verzeichnis (in-place). ```bash svgo -f icons/ ``` `svgo -f -o ` — Optimiert ein Verzeichnis voller SVGs in ein separates Ausgabeverzeichnis. ```bash svgo -f src/icons/ -o dist/icons/ ``` `svgo -s '...'` — Optimiert einen SVG-String direkt. ```bash svgo -s '' ``` `cat | svgo -i - -o -` — Liest von stdin, schreibt nach stdout (für Pipelines). ```bash cat icon.svg | svgo -i - -o - > icon.min.svg ``` ## Ausgabeoptionen `svgo --pretty -o ` — Gibt die Ausgabe formatiert mit Einrückung aus. ```bash svgo --pretty logo.svg -o logo.clean.svg ``` `svgo --indent --pretty -o ` — Setzt die Einrückungstiefe für die formatierte Ausgabe (Standard: 4). ```bash svgo --indent 2 --pretty logo.svg -o logo.clean.svg ``` `svgo --final-newline -o ` — Stellt sicher, dass die Ausgabe mit einem Zeilenumbruch endet. ```bash svgo --final-newline icon.svg -o icon.min.svg ``` `svgo -r -f ` — Optimiert SVGs rekursiv in Unterverzeichnissen. ```bash svgo -r -f assets/ ``` ## Konfiguration `svgo --config ` — Verwendet eine eigene Konfigurationsdatei. ```bash svgo --config svgo.config.js icon.svg ``` `svgo -p ` — Überschreibt die Zahl der Nachkommastellen (Präzision) für alle Plugins. ```bash svgo -p 2 icon.svg ``` `svgo -f --exclude ` — Schließt Dateien aus, die auf ein Regex-Muster passen (nur zusammen mit `-f`). ```bash svgo -f icons/ --exclude 'sprite.*\.svg' ``` `svgo --datauri ` — Gibt das Ergebnis als Data-URI aus (`base64`, `enc` oder `unenc`). ```bash svgo --datauri base64 icon.svg -o icon.txt ``` `svgo --multipass ` — Führt mehrere Optimierungsdurchläufe aus, bis keine Einsparung mehr möglich ist. ```bash svgo --multipass complex-graphic.svg ``` `svgo --show-plugins` — Listet alle verfügbaren eingebauten Plugins auf. ```bash svgo --show-plugins ``` ## Konfigurationsdatei (svgo.config.js) `module.exports = { plugins: ['preset-default'] }` — Minimal-Konfiguration mit dem Standard-Preset (alle Standard-Plugins). ```bash // 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). ```bash 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). ```bash 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). ```bash 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. ```bash module.exports = { plugins: ['preset-default', { name: 'addAttributesToSVGElement', params: { attributes: [{ 'aria-hidden': 'true' }] } }] } ``` `{ name: 'sortAttrs' }` — Element-Attribute für eine konsistente Ausgabe sortieren. ```bash module.exports = { plugins: ['preset-default', 'sortAttrs'] } ``` `{ name: 'removeDimensions' }` — width/height entfernen und viewBox ergänzen, falls nicht vorhanden (für responsive SVGs). ```bash module.exports = { plugins: ['preset-default', 'removeDimensions'] } ``` ## Wichtige Standard-Plugins `removeDoctype` — Entfernt die DOCTYPE-Deklaration. ```bash Removes: ``` `removeXMLProcInst` — Entfernt XML-Verarbeitungsanweisungen. ```bash Removes: ``` `removeComments` — Entfernt alle XML-Kommentare. ```bash Removes: ``` `removeMetadata` — Entfernt -Elemente. ```bash Removes: ... ``` `removeEditorsNSData` — Entfernt Editor-Namespace-Daten (Inkscape, Sketch, Illustrator). ```bash Removes: inkscape:*, sodipodi:*, sketch:* attributes ``` `cleanupIds` — Verkleinert und dedupliziert Element-IDs. ```bash Renames: id="SVGID_1_" → id="a" ``` `removeUselessDefs` — Entfernt ohne Referenzen. ```bash Removes unused gradient, filter, or symbol definitions ``` `collapseGroups` — Löst überflüssige -Wrapper-Gruppen auf. ```bash Removes: → ``` `mergePaths` — Führt mehrere -Elemente zusammen, wo möglich. ```bash Combines adjacent paths with same attributes ``` `convertPathData` — Optimiert Pfaddaten: entfernt redundante Befehle, rundet Werte. ```bash 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. ```bash svgo -f src/icons/ -o dist/icons/ --config svgo.config.js ``` `find . -name '*.svg' -exec svgo {} \;` — Optimiert alle SVGs rekursiv in Unterverzeichnissen. ```bash find assets/ -name '*.svg' -exec svgo --multipass {} \; ``` `svgo -f --config icons.config.js` — Sichere Optimierung für Icon-Systeme (viewBox und IDs per Konfiguration erhalten). ```bash svgo -f components/icons/ --config icons.config.js ``` `svgo --multipass --pretty --indent 2 -o ` — Maximale Optimierung mit lesbarer Ausgabe (für versionierte SVGs). ```bash svgo --multipass --pretty --indent 2 -o logo.svg raw-logo.svg ``` `npx svgo -o ` — Ausführen ohne globale Installation via npx. ```bash npx svgo logo.svg -o logo.min.svg ``` `npx svgo@latest -f ` — Neueste Version ohne Installation ausführen. ```bash 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, `` 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](https://github.com/svg/svgo) – Quellcode, Plugin-Referenz und vollständige Konfigurationsdokumentation - [MDN: SVG](https://developer.mozilla.org/de/docs/Web/SVG) – deutschsprachige Referenz zum SVG-Format und seinen Elementen ## Verwandte Kommandos - [convert](https://www.jpkc.com/db/cheatsheets/images-media/convert/) – wandelt Raster- und Vektorbilder um (ImageMagick), inkl. SVG-Rasterung - [pngquant](https://www.jpkc.com/db/cheatsheets/images-media/pngquant/) – verlustbehaftete Komprimierung von PNG-Dateien - [optipng](https://www.jpkc.com/db/cheatsheets/images-media/optipng/) – verlustfreie Optimierung von PNG-Dateien