svgo: A JavaScript repository from ericdesa

SVGO

SVG Optimizer is a Nodejs-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

yarn global add svgo

CLI usage

svgo one.svg two.svg -p one.min.svg two.min.svg

Or use --folder, -f flag to optimize 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 configuration in 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 builtin plugins. See how to configure them:

module.exports = {
  plugins: [
    // enable builtin plugin by name
    'builtinPluginName',
    // or by expanded version
    {
      name: 'builtinPluginName'
    },
    // some plugins allow/require to pass options
    {
      name: 'builtinPluginName',
      params: {
        optionName: 'optionValue'
      }
    }
  ]
}

If plugins field is specified default list is fully overrided. To extend default list use extendDefaultPlugins utility:

const { extendDefaultPlugins } = require('svgo');
module.exports = {
  plugins: extendDefaultPlugins([
    {
      name: 'builtinPluginName',
      params: {
        optionName: 'optionValue'
      }
    }
  ])
}

To disable one of default plugins use active field:

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

See the list of default plugins:

module.exports = {
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'inlineStyles',
    'minifyStyles',
    'convertStyleToAttrs',
    '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 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 relative or absolute path and customize current working directory
const config = await loadConfig(configFile, cwd)

Builtin plugins

Plugin	Description	Default
cleanupAttrs	cleanup attributes from newlines, trailing, and repeating spaces	`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 `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	`enabled`
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 attrs with default values	`enabled`
removeNonInheritableGroupAttrs	remove non-inheritable group's "presentation" attributes	`enabled`
removeUselessStrokeAndFill	remove useless `stroke` and `fill` attrs	`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	`disabled`
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`