SVGO logo
## SVGO [![npm version](https://img.shields.io/npm/v/svgo)](https://npmjs.org/package/svgo) [![Discord](https://img.shields.io/discord/815166721315831868)](https://discord.gg/z8jX8NYxrE) **SVG O**ptimizer 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 ```sh npm -g install svgo ``` or ```sh yarn global add svgo ``` ## CLI usage ```sh svgo one.svg two.svg -o one.min.svg two.min.svg ``` Or use the `--folder`/`-f` flag to optimize a whole folder of SVG icons ```sh svgo -f ./path/to/folder/with/svg/files -o ./path/to/folder/with/svg/output ``` See help for advanced usage ```sh svgo --help ``` ## Configuration Some options can be configured with CLI though it may be easier to have the configuration in a separate file. SVGO automatically loads configuration from `svgo.config.js` or module specified with `--config` flag. ```js module.exports = { multipass: true, // boolean. false by default datauri: 'enc', // 'base64', 'enc' or 'unenc'. 'base64' by default js2svg: { indent: 2, // string with spaces or number of spaces. 4 by default pretty: true, // boolean, false by default }, }; ``` SVGO has a plugin-based architecture, so almost every optimization is a separate plugin. There is a set of [built-in plugins](#built-in-plugins). See how to configure them: ```js module.exports = { plugins: [ // enable a built-in plugin by name 'builtinPluginName', // or by expanded version { name: 'builtinPluginName', }, // some plugins allow/require to pass options { name: 'builtinPluginName', params: { optionName: 'optionValue', }, }, ], }; ``` The default preset of plugins is fully overridden if the `plugins` field is specified. Use `preset-default` plugin to customize plugins options. ```js module.exports = { plugins: [ { name: 'preset-default', params: { overrides: { // customize options for plugins included in preset builtinPluginName: { optionName: 'optionValue', }, // or disable plugins anotherBuiltinPlugin: false, }, }, }, // Enable builtin plugin not included in preset 'moreBuiltinPlugin', // Enable and configure builtin plugin not included in preset { name: 'manyBuiltInPlugin', params: { optionName: 'value', }, }, ], }; ``` 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 It's also possible to specify a custom plugin: ```js const anotherCustomPlugin = require('./another-custom-plugin.js'); module.exports = { plugins: [ { name: 'customPluginName', type: 'perItem', // 'perItem', 'perItemReverse' or 'full' params: { optionName: 'optionValue', }, fn: (ast, params, info) => {}, }, anotherCustomPlugin, ], }; ``` ## API usage SVGO provides a few low level utilities. ### optimize The core of SVGO is `optimize` function. ```js const { optimize } = require('svgo'); const result = optimize(svgString, { // optional but recommended field path: 'path-to.svg', // all config fields are also available here multipass: true, }); const optimizedSvgString = result.data; ``` ### loadConfig If you write a tool on top of SVGO you might need a way to load SVGO config. ```js const { loadConfig } = require('svgo'); const config = await loadConfig(); // you can also specify a relative or absolute path and customize the current working directory const config = await loadConfig(configFile, cwd); ``` ## Built-in plugins | Plugin | Description | Default | | ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | [cleanupAttrs](https://github.com/svg/svgo/blob/master/plugins/cleanupAttrs.js) | cleanup attributes from newlines, trailing, and repeating spaces | `enabled` | | [mergeStyles](https://github.com/svg/svgo/blob/master/plugins/mergeStyles.js) | merge multiple style elements into one | `enabled` | | [inlineStyles](https://github.com/svg/svgo/blob/master/plugins/inlineStyles.js) | move and merge styles from `