svgo

What is svgo?

The svgo npm package is a Node.js-based tool for optimizing SVG vector graphics files. SVGO stands for Scalable Vector Graphics Optimizer. It works by applying a series of transformations and optimizations to SVG files to reduce their size without affecting their visual quality. This is particularly useful for web development, where smaller file sizes can lead to faster load times and better performance.

What are svgo's main functionalities?

Minify SVG files

This feature allows you to minify SVG files by removing unnecessary data without affecting the rendering of the SVG. The code sample demonstrates how to use the optimize function to minify an SVG string.

const { optimize } = require('svgo');
const svgString = '<svg ...> ... </svg>';
const result = optimize(svgString, { path: 'path/to/svg/file.svg' });
console.log(result.data);

Remove specified attributes

This feature allows you to remove specified attributes from SVG elements. The code sample shows how to use the removeAttributesBySelector plugin to remove the 'fill' attribute from all elements that have it.

const { optimize } = require('svgo');
const svgString = '<svg ...> ... </svg>';
const result = optimize(svgString, {
  plugins: [
    {
      name: 'removeAttributesBySelector',
      params: {
        selector: '[fill]',
        attributes: 'fill'
      }
    }
  ]
});
console.log(result.data);

Prettify SVG files

This feature allows you to prettify SVG files by reformatting them with consistent indentation and spacing. The code sample demonstrates how to use the js2svg option with the pretty parameter set to true.

const { optimize } = require('svgo');
const svgString = '<svg ...> ... </svg>';
const result = optimize(svgString, {
  plugins: [
    'preset-default',
    'sortAttrs',
    {
      name: 'removeAttrs',
      params: { attrs: '(stroke|fill)' }
    }
  ],
  js2svg: { pretty: true }
});
console.log(result.data);

Other packages similar to svgo

imagemin-svgo

imagemin-svgo is a plugin for Imagemin, which is a general image optimization framework. While svgo focuses solely on SVG files, Imagemin can handle various image formats when combined with the appropriate plugins. Imagemin-svgo brings the capabilities of svgo to the Imagemin ecosystem.

svg-sprite

svg-sprite is a package that takes a set of SVG files and combines them into a single sprite sheet. While svgo optimizes individual SVG files, svg-sprite focuses on creating an efficient way to bundle multiple SVGs for use on the web.

svg-crowbar

svg-crowbar is a tool designed to extract SVG elements from an HTML document and download them as standalone SVG files. It is different from svgo, which optimizes existing SVG files rather than extracting them from HTML.

README

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

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 preset of plugins is fully overridden if the plugins field is specified. Use preset-default plugin to customize plugins options.

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // customize options for plugins included in preset
          builtinPluginName: {
            optionName: 'optionValue',
          },
          // or disable plugins
          anotherBuiltinPlugin: false,
        },
      },
    },
    // Enable builtin plugin not included in preset
    'moreBuiltinPlugin',
    // Enable and configure builtin plugin not included in preset
    {
      name: 'manyBuiltInPlugin',
      params: {
        optionName: 'value',
      },
    },
  ],
};

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:

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.

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

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.