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

# Via npm
npm -g install svgo
# Via yarn
yarn global add svgo

CLI usage

# Processing single files:
svgo one.svg two.svg -o one.min.svg two.min.svg
# Processing directory of svg files, recursively using `-f`, `--folder` :
svgo -f ./path/to/folder/with/svg/files -o ./path/to/folder/with/svg/output
# Help for advanced usage
svgo --help

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.

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

    // enable built-in plugins by name
    'prefixIds',

    // or by expanded notation which allows to configure plugin
    {
      name: 'sortAttrs',
      params: {
        xmlnsOrder: 'alphabetical',
      },
    },
  ],
};

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.

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // customize default plugin options
          inlineStyles: {
            onlyMatchedOnce: false,
          },

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

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:

const anotherCustomPlugin = require('./another-custom-plugin.js');
module.exports = {
  plugins: [
    {
      name: 'customPluginName',
      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.

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 <style> elements to element style attributes
enabled

removeDoctype
remove doctype declaration
enabled

removeXMLProcInst
remove XML processing instructions
enabled

removeComments
remove comments
enabled

removeMetadata
remove <metadata>

enabled

removeTitle
remove <title>

enabled

removeDesc
remove <desc>

enabled

removeUselessDefs
remove elements of <defs> 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 <style> 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 <path>

enabled

convertEllipseToCircle
convert non-eccentric <ellipse> to <circle>

enabled

sortAttrs
sort element attributes for epic readability
enabled

sortDefsChildren
sort children of <defs> 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 <svg> element
disabled

addAttributesToSVGElement
adds attributes to an outer <svg> element
disabled

removeOffCanvasPaths
removes elements that are drawn outside of the viewbox
disabled

removeStyleElement
remove <style> elements
disabled

removeScriptElement
remove <script> elements
disabled

reusePaths
Find duplicated elements and replace them with links
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

SheetJS LLC
Fontello

License and Copyright

This software is released under the terms of the MIT license.
Logo by André Castillo.