svgo-v2

SVGO  

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

``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. See how to configure them:

`js
module.exports = {
plugins: [
// enable a built-in plugin by name
'prefixIds',

// or by expanded version
{
name: 'prefixIds',
},

// some plugins allow/require to pass options
{
name: 'prefixIds',
params: {
prefix: 'my-prefix',
},
},
],
};
`

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
inlineStyles: {
onlyMatchedOnce: false,
},

// or disable plugins
removeDoctype: false,
},
},
},

// enable builtin plugin not included in default preset
'prefixIds',

// enable and configure builtin plugin not included in preset
{
name: 'sortAttrs',
params: {
xmlnsOrder: 'alphabetical',
},
},
],
};
`

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.

$3

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;
`

$3

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 | cleanup attributes from newlines, trailing, and repeating spaces | enabled |
| mergeStyles | merge multiple style elements into one | enabled |
| inlineStyles | move and merge styles from