Package - svgo

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 <path> elements and replace them with <use> 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.

Current Tags

3.0.2 ... latest (2 years ago)