SVGO

Node.js tool for optimizing SVG files

SVGPerformance
svg/svgosvgo

README

SVGO logo

SVGO npm version Discord


SVG Optimizer is a Node.js-based tool for optimizing SVG vector graphics files.

Why?


SVG files, especially those exported from various editors, usually contain a lot of redundant and useless information. This can include editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting the SVG rendering result.

Installation


  1. ```sh
  2. # Via npm
  3. npm -g install svgo
  4. # Via yarn
  5. yarn global add svgo
  6. ```

CLI usage


  1. ```sh
  2. # Processing single files:
  3. svgo one.svg two.svg -o one.min.svg two.min.svg
  4. # Processing directory of svg files, recursively using `-f`, `--folder` :
  5. svgo -f ./path/to/folder/with/svg/files -o ./path/to/folder/with/svg/output
  6. # Help for advanced usage
  7. svgo --help
  8. ```

Configuration


SVGO has a plugin-based architecture, separate plugins allows various xml svg optimizations. See built-in plugins.
SVGO automatically loads configuration from svgo.config.js or from --config ./path/myconfig.js. Some general options can be configured via CLI.

  1. ``` js
  2. // svgo.config.js
  3. module.exports = {
  4.   multipass: true, // boolean. false by default
  5.   datauri: 'enc', // 'base64' (default), 'enc' or 'unenc'.
  6.   js2svg: {
  7.     indent: 2, // string with spaces or number of spaces. 4 by default
  8.     pretty: true, // boolean, false by default
  9.   },
  10.   plugins: [
  11.     // set of built-in plugins enabled by default
  12.     'preset-default',

  14.     // enable built-in plugins by name
  15.     'prefixIds',

  17.     // or by expanded notation which allows to configure plugin
  18.     {
  19.       name: 'sortAttrs',
  20.       params: {
  21.         xmlnsOrder: 'alphabetical',
  22.       },
  23.     },
  24.   ],
  25. };
  26. ```

Default preset


When extending default configuration specify preset-default plugin to enable optimisations.
Each plugin of default preset can be disabled or configured with "overrides" param.

  1. ``` js
  2. module.exports = {
  3.   plugins: [
  4.     {
  5.       name: 'preset-default',
  6.       params: {
  7.         overrides: {
  8.           // customize default plugin options
  9.           inlineStyles: {
  10.             onlyMatchedOnce: false,
  11.           },

  13.           // or disable plugins
  14.           removeDoctype: false,
  15.         },
  16.       },
  17.     },
  18.   ],
  19. };
  20. ```

Default preset includes the following list of plugins:

- removeDoctype
- removeXMLProcInst
- removeComments
- removeMetadata
- removeEditorsNSData
- cleanupAttrs
- mergeStyles
- inlineStyles
- minifyStyles
- cleanupIds
- removeUselessDefs
- cleanupNumericValues
- convertColors
- removeUnknownsAndDefaults
- removeNonInheritableGroupAttrs
- removeUselessStrokeAndFill
- removeViewBox
- cleanupEnableBackground
- removeHiddenElems
- removeEmptyText
- convertShapeToPath
- convertEllipseToCircle
- moveElemsAttrsToGroup
- moveGroupAttrsToElems
- collapseGroups
- convertPathData
- convertTransform
- removeEmptyAttrs
- removeEmptyContainers
- mergePaths
- removeUnusedNS
- sortDefsChildren
- removeTitle
- removeDesc

Custom plugin


It's also possible to specify a custom plugin:

  1. ``` js
  2. const anotherCustomPlugin = require('./another-custom-plugin.js');
  3. module.exports = {
  4.   plugins: [
  5.     {
  6.       name: 'customPluginName',
  7.       params: {
  8.         optionName: 'optionValue',
  9.       },
  10.       fn: (ast, params, info) => {},
  11.     },
  12.     anotherCustomPlugin,
  13.   ],
  14. };
  15. ```

API usage


SVGO provides a few low level utilities.

optimize


The core of SVGO is optimize function.

  1. ``` js
  2. const { optimize } = require('svgo');
  3. const result = optimize(svgString, {
  4.   // optional but recommended field
  5.   path: 'path-to.svg',
  6.   // all config fields are also available here
  7.   multipass: true,
  8. });
  9. const optimizedSvgString = result.data;
  10. ```

loadConfig


If you write a tool on top of SVGO you might need a way to load SVGO config.

  1. ``` js
  2. const { loadConfig } = require('svgo');
  3. const config = await loadConfig();

  5. // you can also specify a relative or absolute path and customize the current working directory
  6. const config = await loadConfig(configFile, cwd);
  7. ```

Built-in plugins


PluginDescriptionDefault
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
[cleanupAttrs](https://github.com/svg/svgo/blob/main/plugins/cleanupAttrs.js)cleanup`enabled`
[mergeStyles](https://github.com/svg/svgo/blob/main/plugins/mergeStyles.js)merge`enabled`
[inlineStyles](https://github.com/svg/svgo/blob/main/plugins/inlineStyles.js)move`enabled`
[removeDoctype](https://github.com/svg/svgo/blob/main/plugins/removeDoctype.js)remove`enabled`
[removeXMLProcInst](https://github.com/svg/svgo/blob/main/plugins/removeXMLProcInst.js)remove`enabled`
[removeComments](https://github.com/svg/svgo/blob/main/plugins/removeComments.js)remove`enabled`
[removeMetadata](https://github.com/svg/svgo/blob/main/plugins/removeMetadata.js)remove`enabled`
[removeTitle](https://github.com/svg/svgo/blob/main/plugins/removeTitle.js)remove`enabled`
[removeDesc](https://github.com/svg/svgo/blob/main/plugins/removeDesc.js)remove`enabled`
[removeUselessDefs](https://github.com/svg/svgo/blob/main/plugins/removeUselessDefs.js)remove`enabled`
[removeXMLNS](https://github.com/svg/svgo/blob/main/plugins/removeXMLNS.js)removes`disabled`
[removeEditorsNSData](https://github.com/svg/svgo/blob/main/plugins/removeEditorsNSData.js)remove`enabled`
[removeEmptyAttrs](https://github.com/svg/svgo/blob/main/plugins/removeEmptyAttrs.js)remove`enabled`
[removeHiddenElems](https://github.com/svg/svgo/blob/main/plugins/removeHiddenElems.js)remove`enabled`
[removeEmptyText](https://github.com/svg/svgo/blob/main/plugins/removeEmptyText.js)remove`enabled`
[removeEmptyContainers](https://github.com/svg/svgo/blob/main/plugins/removeEmptyContainers.js)remove`enabled`
[removeViewBox](https://github.com/svg/svgo/blob/main/plugins/removeViewBox.js)remove`enabled`
[cleanupEnableBackground](https://github.com/svg/svgo/blob/main/plugins/cleanupEnableBackground.js)remove`enabled`
[minifyStyles](https://github.com/svg/svgo/blob/main/plugins/minifyStyles.js)minify`enabled`
[convertStyleToAttrs](https://github.com/svg/svgo/blob/main/plugins/convertStyleToAttrs.js)convert`disabled`
[convertColors](https://github.com/svg/svgo/blob/main/plugins/convertColors.js)convert`enabled`
[convertPathData](https://github.com/svg/svgo/blob/main/plugins/convertPathData.js)convert`enabled`
[convertTransform](https://github.com/svg/svgo/blob/main/plugins/convertTransform.js)collapse`enabled`
[removeUnknownsAndDefaults](https://github.com/svg/svgo/blob/main/plugins/removeUnknownsAndDefaults.js)remove`enabled`
[removeNonInheritableGroupAttrs](https://github.com/svg/svgo/blob/main/plugins/removeNonInheritableGroupAttrs.js)remove`enabled`
[removeUselessStrokeAndFill](https://github.com/svg/svgo/blob/main/plugins/removeUselessStrokeAndFill.js)remove`enabled`
[removeUnusedNS](https://github.com/svg/svgo/blob/main/plugins/removeUnusedNS.js)remove`enabled`
[prefixIds](https://github.com/svg/svgo/blob/main/plugins/prefixIds.js)prefix`disabled`
[cleanupIds](https://github.com/svg/svgo/blob/main/plugins/cleanupIds.js)remove`enabled`
[cleanupNumericValues](https://github.com/svg/svgo/blob/main/plugins/cleanupNumericValues.js)round`enabled`
[cleanupListOfValues](https://github.com/svg/svgo/blob/main/plugins/cleanupListOfValues.js)round`disabled`
[moveElemsAttrsToGroup](https://github.com/svg/svgo/blob/main/plugins/moveElemsAttrsToGroup.js)move`enabled`
[moveGroupAttrsToElems](https://github.com/svg/svgo/blob/main/plugins/moveGroupAttrsToElems.js)move`enabled`
[collapseGroups](https://github.com/svg/svgo/blob/main/plugins/collapseGroups.js)collapse`enabled`
[removeRasterImages](https://github.com/svg/svgo/blob/main/plugins/removeRasterImages.js)remove`disabled`
[mergePaths](https://github.com/svg/svgo/blob/main/plugins/mergePaths.js)merge`enabled`
[convertShapeToPath](https://github.com/svg/svgo/blob/main/plugins/convertShapeToPath.js)convert`enabled`
[convertEllipseToCircle](https://github.com/svg/svgo/blob/main/plugins/convertEllipseToCircle.js)convert`enabled`
[sortAttrs](https://github.com/svg/svgo/blob/main/plugins/sortAttrs.js)sort`enabled`
[sortDefsChildren](https://github.com/svg/svgo/blob/main/plugins/sortDefsChildren.js)sort`enabled`
[removeDimensions](https://github.com/svg/svgo/blob/main/plugins/removeDimensions.js)remove`disabled`
[removeAttrs](https://github.com/svg/svgo/blob/main/plugins/removeAttrs.js)remove`disabled`
[removeAttributesBySelector](https://github.com/svg/svgo/blob/main/plugins/removeAttributesBySelector.js)removes`disabled`
[removeElementsByAttr](https://github.com/svg/svgo/blob/main/plugins/removeElementsByAttr.js)remove`disabled`
[addClassesToSVGElement](https://github.com/svg/svgo/blob/main/plugins/addClassesToSVGElement.js)add`disabled`
[addAttributesToSVGElement](https://github.com/svg/svgo/blob/main/plugins/addAttributesToSVGElement.js)adds`disabled`
[removeOffCanvasPaths](https://github.com/svg/svgo/blob/main/plugins/removeOffCanvasPaths.js)removes`disabled`
[removeStyleElement](https://github.com/svg/svgo/blob/main/plugins/removeStyleElement.js)remove`disabled`
[removeScriptElement](https://github.com/svg/svgo/blob/main/plugins/removeScriptElement.js)remove`disabled`
[reusePaths](https://github.com/svg/svgo/blob/main/plugins/reusePaths.js)Find`disabled`

Other Ways to Use SVGO


- as a web app – SVGOMG
- as a GitHub Action – SVGO Action
- as a Grunt task – grunt-svgmin
- as a Gulp task – gulp-svgmin
- as a Mimosa module – mimosa-minify-svg
- as an OSX Folder Action – svgo-osx-folder-action
- as a webpack loader – image-webpack-loader
- as a Telegram Bot – svgo_bot
- as a PostCSS plugin – postcss-svgo
- as an Inkscape plugin – inkscape-svgo
- as a Sketch plugin - svgo-compressor
- as a macOS app - Image Shrinker
- as a Rollup plugin - rollup-plugin-svgo
- as a VS Code plugin - vscode-svgo
- as a Atom plugin - atom-svgo
- as a Sublime plugin - Sublime-svgo
- as a Figma plugin - Advanced SVG Export
- as a Linux app - Oh My SVG
- as a Browser extension - SVG Gobbler
- as an API - Vector Express

Donators


| [](https://sheetjs.com/) | [](https://fontello.com/) |
| :------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: |
|                       SheetJS LLC                        |                                               Fontello                                               |

License and Copyright


This software is released under the terms of the MIT license.

Logo by André Castillo.