Need help with svgo?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

svg
16.3K Stars 1.2K Forks MIT License 1.2K Commits 223 Opened issues

Description

⚙️ Node.js tool for optimizing SVG files

Services available

!
?

Need anything else?

Contributors list

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

npm -g install svgo

or

yarn global add svgo

CLI usage

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
svgo -f ./path/to/folder/with/svg/files -o ./path/to/folder/with/svg/output

See help for advanced usage

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.
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:

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 list is fully overridden if the

plugins
field is specified. To extend the default list use the
extendDefaultPlugins
utility:
const { extendDefaultPlugins } = require('svgo');
module.exports = {
  plugins: extendDefaultPlugins([
    {
      name: 'builtinPluginName',
      params: {
        optionName: 'optionValue'
      }
    }
  ])
}

To disable one of the default plugins use the

active
field:
const { extendDefaultPlugins } = require('svgo');
module.exports = {
  plugins: extendDefaultPlugins([
    {
      name: 'builtinPluginName',
      active: false
    }
  ])
}

See the list of the default plugins:

module.exports = {
  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:

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.

extendDefaultPlugins
is described above.

optimize

The core of SVGO is

optimize
function.
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.

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
 elements to element 
style
attributes |
enabled
| | removeDoctype | remove
doctype
declaration |
enabled
| | removeXMLProcInst | remove XML processing instructions |
enabled
| | removeComments | remove comments |
enabled
| | removeMetadata | remove
 | 
enabled
| | removeTitle | remove
 | 
enabled
| | removeDesc | remove
 | 
enabled
| | removeUselessDefs | remove elements of
 without 
id
|
enabled
| | removeXMLNS | removes the
xmlns
attribute (for inline SVG) |
disabled
| | removeEditorsNSData | remove editors namespaces, elements, and attributes |
enabled
| | removeEmptyAttrs | remove empty attributes |
enabled
| | removeHiddenElems | remove hidden elements |
enabled
| | removeEmptyText | remove empty Text elements |
enabled
| | removeEmptyContainers | remove empty Container elements |
enabled
| | removeViewBox | remove
viewBox
attribute when possible |
enabled
| | cleanupEnableBackground | remove or cleanup
enable-background
attribute when possible |
enabled
| | minifyStyles | minify
 elements content with CSSO | 
enabled
| | convertStyleToAttrs | convert styles into attributes |
disabled
| | convertColors | convert colors (from
rgb()
to
#rrggbb
, from
#rrggbb
to
#rgb
) |
enabled
| | convertPathData | convert Path data to relative or absolute (whichever is shorter), convert one segment to another, trim useless delimiters, smart rounding, and much more |
enabled
| | convertTransform | collapse multiple transforms into one, convert matrices to the short aliases, and much more |
enabled
| | removeUnknownsAndDefaults | remove unknown elements content and attributes, remove attributes with default values |
enabled
| | removeNonInheritableGroupAttrs | remove non-inheritable group's "presentation" attributes |
enabled
| | removeUselessStrokeAndFill | remove useless
stroke
and
fill
attributes |
enabled
| | removeUnusedNS | remove unused namespaces declaration |
enabled
| | prefixIds | prefix IDs and classes with the SVG filename or an arbitrary string |
disabled
| | cleanupIDs | remove unused and minify used IDs |
enabled
| | cleanupNumericValues | round numeric values to the fixed precision, remove default
px
units |
enabled
| | cleanupListOfValues | round numeric values in attributes that take a list of numbers (like
viewBox
or
enable-background
) |
disabled
| | moveElemsAttrsToGroup | move elements' attributes to their enclosing group |
enabled
| | moveGroupAttrsToElems | move some group attributes to the contained elements |
enabled
| | collapseGroups | collapse useless groups |
enabled
| | removeRasterImages | remove raster images |
disabled
| | mergePaths | merge multiple Paths into one |
enabled
| | convertShapeToPath | convert some basic shapes to
 | 
enabled
| | convertEllipseToCircle | convert non-eccentric
 to 
 | 
enabled
| | sortAttrs | sort element attributes for epic readability |
disabled
| | sortDefsChildren | sort children of
 in order to improve compression | 
enabled
| | removeDimensions | remove
width
/
height
and add
viewBox
if it's missing (opposite to removeViewBox, disable it first) |
disabled
| | removeAttrs | remove attributes by pattern |
disabled
| | removeAttributesBySelector | removes attributes of elements that match a CSS selector |
disabled
| | removeElementsByAttr | remove arbitrary elements by
ID
or
className
|
disabled
| | addClassesToSVGElement | add classnames to an outer
 element | 
disabled
| | addAttributesToSVGElement | adds attributes to an outer
 element | 
disabled
| | removeOffCanvasPaths | removes elements that are drawn outside of the viewbox |
disabled
| | removeStyleElement | remove
 elements | 
disabled
| | removeScriptElement | remove
 elements | 
disabled
| | reusePaths | Find duplicated elements and replace them with links |
disabled
|

Other Ways to Use SVGO

Donators

| | | |:-:|:-:| | SheetJS LLC | Fontello |

License and Copyright

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

Logo by André Castillo.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.