# svgo — Optimize and Minify SVG Files > Practical guide to svgo — optimize SVG files, strip metadata and shrink file size via the CLI, npx and svgo.config.js. Source: https://www.jpkc.com/db/en/cheatsheets/images-media/svgo/ svgo is the de-facto standard for optimizing SVG files: the Node.js tool strips comments, editor metadata and excess precision, merges paths and often cuts file size in half – usually with no visible loss in quality. Run it globally installed (`npm i -g svgo`) or straight from `npx svgo`, optimize single files or whole folders, and control every detail through plugins in an `svgo.config.js`. One caveat, though: without `-o` svgo writes in-place and overwrites the original, so keep a backup. ## Basic Usage `svgo ` — Optimize an SVG file in-place (overwrites original). ```bash svgo icon.svg ``` `svgo -o ` — Optimize and write to a different file. ```bash svgo logo.svg -o logo.min.svg ``` `svgo -i -o ` — Explicit input/output flags. ```bash svgo -i src/logo.svg -o dist/logo.svg ``` `svgo -f ` — Optimize all SVGs in a directory (in-place). ```bash svgo -f icons/ ``` `svgo -f -o ` — Optimize directory of SVGs to a separate output directory. ```bash svgo -f src/icons/ -o dist/icons/ ``` `svgo -s '...'` — Optimize an SVG string directly. ```bash svgo -s '' ``` `cat | svgo -i - -o -` — Read from stdin, write to stdout (for piping). ```bash cat icon.svg | svgo -i - -o - > icon.min.svg ``` ## Output Options `svgo --pretty -o ` — Pretty-print the output with indentation. ```bash svgo --pretty logo.svg -o logo.clean.svg ``` `svgo --indent --pretty -o ` — Set indentation level for pretty-print (default: 4). ```bash svgo --indent 2 --pretty logo.svg -o logo.clean.svg ``` `svgo --final-newline -o ` — Ensure output ends with a newline character. ```bash svgo --final-newline icon.svg -o icon.min.svg ``` `svgo -r -f ` — Recursively optimize SVGs in subdirectories. ```bash svgo -r -f assets/ ``` ## Configuration `svgo --config ` — Use a custom configuration file. ```bash svgo --config svgo.config.js icon.svg ``` `svgo -p ` — Override the number of fractional digits (precision) across all plugins. ```bash svgo -p 2 icon.svg ``` `svgo -f --exclude ` — Exclude files matching a regex pattern (use with `-f` only). ```bash svgo -f icons/ --exclude 'sprite.*\.svg' ``` `svgo --datauri ` — Output the result as a Data URI (`base64`, `enc` or `unenc`). ```bash svgo --datauri base64 icon.svg -o icon.txt ``` `svgo --multipass ` — Run multiple optimization passes until no further savings. ```bash svgo --multipass complex-graphic.svg ``` `svgo --show-plugins` — List all available built-in plugins. ```bash svgo --show-plugins ``` ## Config File (svgo.config.js) `module.exports = { plugins: ['preset-default'] }` — Minimal config using the default preset (all default plugins). ```bash // svgo.config.js module.exports = { plugins: ['preset-default'] } ``` `{ name: 'preset-default', params: { overrides: { removeViewBox: false } } }` — Use default preset but disable removeViewBox (important for responsive SVGs). ```bash module.exports = { plugins: [{ name: 'preset-default', params: { overrides: { removeViewBox: false } } }] } ``` `{ name: 'preset-default', params: { overrides: { cleanupIds: false } } }` — Keep IDs intact (needed when referencing SVG elements from CSS/JS). ```bash module.exports = { plugins: [{ name: 'preset-default', params: { overrides: { cleanupIds: false } } }] } ``` `{ name: 'removeAttrs', params: { attrs: '(fill|stroke)' } }` — Remove specific attributes (e.g., for CSS-controlled icons). ```bash module.exports = { plugins: ['preset-default', { name: 'removeAttrs', params: { attrs: '(fill|stroke)' } }] } ``` `{ name: 'addAttributesToSVGElement', params: { attributes: [{ 'aria-hidden': 'true' }] } }` — Add attributes to the root SVG element. ```bash module.exports = { plugins: ['preset-default', { name: 'addAttributesToSVGElement', params: { attributes: [{ 'aria-hidden': 'true' }] } }] } ``` `{ name: 'sortAttrs' }` — Sort element attributes for consistent output. ```bash module.exports = { plugins: ['preset-default', 'sortAttrs'] } ``` `{ name: 'removeDimensions' }` — Remove width/height and add viewBox if missing (for responsive SVGs). ```bash module.exports = { plugins: ['preset-default', 'removeDimensions'] } ``` ## Key Default Plugins `removeDoctype` — Remove DOCTYPE declaration. ```bash Removes: ``` `removeXMLProcInst` — Remove XML processing instructions. ```bash Removes: ``` `removeComments` — Remove all XML comments. ```bash Removes: ``` `removeMetadata` — Remove elements. ```bash Removes: ... ``` `removeEditorsNSData` — Remove editor namespace data (Inkscape, Sketch, Illustrator). ```bash Removes: inkscape:*, sodipodi:*, sketch:* attributes ``` `cleanupIds` — Minify and deduplicate element IDs. ```bash Renames: id="SVGID_1_" → id="a" ``` `removeUselessDefs` — Remove with no references. ```bash Removes unused gradient, filter, or symbol definitions ``` `collapseGroups` — Collapse useless wrapper groups. ```bash Removes: → ``` `mergePaths` — Merge multiple elements into one where possible. ```bash Combines adjacent paths with same attributes ``` `convertPathData` — Optimize path data: remove redundant commands, round values. ```bash M10.123 20.456 → M10.1 20.5 ``` ## Common Patterns `svgo -f icons/ -o icons/ --config svgo.config.js` — Optimize all icons with a project-specific config. ```bash svgo -f src/icons/ -o dist/icons/ --config svgo.config.js ``` `find . -name '*.svg' -exec svgo {} \;` — Recursively optimize all SVGs in subdirectories. ```bash find assets/ -name '*.svg' -exec svgo --multipass {} \; ``` `svgo -f --config icons.config.js` — Safe optimization for icon systems (preserve viewBox and IDs via config). ```bash svgo -f components/icons/ --config icons.config.js ``` `svgo --multipass --pretty --indent 2 -o ` — Maximum optimization with readable output (for source-controlled SVGs). ```bash svgo --multipass --pretty --indent 2 -o logo.svg raw-logo.svg ``` `npx svgo -o ` — Run without global installation via npx. ```bash npx svgo logo.svg -o logo.min.svg ``` `npx svgo@latest -f ` — Run the latest version without installing. ```bash npx svgo@latest -f icons/ ``` ## Conclusion svgo belongs in every frontend build: a single run strips editor cruft, trims path data and saves real bytes – for everyday work `svgo file.svg -o file.min.svg`, the folder mode `-f` and an `svgo.config.js` are all you need. Be aware of the pitfalls, though: without `-o` svgo works in-place and overwrites the original, so back it up first. Aggressive defaults can break SVGs – `removeViewBox` breaks the scaling of responsive graphics (usually disable it), too low a `floatPrecision` causes visible distortion, and `cleanupIds` can break references from animations, `` or external CSS/JS. Drive those plugins deliberately through the config. Note: the old `--enable`/`--disable` CLI flags from svgo 1.x were removed in version 2/3 – plugins are now configured exclusively via `svgo.config.js`. ## Further Reading - [svgo on GitHub](https://github.com/svg/svgo) – source code, plugin reference and full configuration documentation - [MDN: SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) – reference for the SVG format and its elements ## Related Commands - [convert](https://www.jpkc.com/db/en/cheatsheets/images-media/convert/) – convert raster and vector images (ImageMagick), including SVG rasterization - [pngquant](https://www.jpkc.com/db/en/cheatsheets/images-media/pngquant/) – lossy compression of PNG files - [optipng](https://www.jpkc.com/db/en/cheatsheets/images-media/optipng/) – lossless optimization of PNG files