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

english | русский

---

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.

What it can do

SVGO has a plugin-based architecture, so almost every optimization is a separate plugin.

Today we have:

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

Want to know how it works and how to write your own plugin? Of course you want to. (동작방법)

Installation

$ [sudo] npm install -g svgo

Usage

CLI

Usage:
  svgo [OPTIONS] [ARGS]

Options:
  -h, --help : Help
  -v, --version : Version
  -i INPUT, --input=INPUT : Input file, "-" for STDIN
  -s STRING, --string=STRING : Input SVG data string
  -f FOLDER, --folder=FOLDER : Input folder, optimize and rewrite all *.svg files
  -o OUTPUT, --output=OUTPUT : Output file or folder (by default the same as the input), "-" for STDOUT
  -p PRECISION, --precision=PRECISION : Set number of digits in the fractional part, overrides plugins params
  --config=CONFIG : Config file or JSON string to extend or replace default
  --disable=PLUGIN : Disable plugin by name, "--disable=PLUGIN1,PLUGIN2" for multiple plugins
  --enable=PLUGIN : Enable plugin by name, "--enable=PLUGIN3,PLUGIN4" for multiple plugins
  --datauri=DATAURI : Output as Data URI string (base64, URI encoded or unencoded)
  --multipass : Pass over SVGs multiple times to ensure all optimizations are applied
  --pretty : Make SVG pretty printed
  --indent=INDENT : Indent number when pretty printing SVGs
  -r, --recursive : Use with '-f'. Optimizes *.svg files in folders recursively.
  -q, --quiet : Only output error messages, not regular status messages
  --show-plugins : Show available plugins and exit

Arguments:
  INPUT : Alias to --input

• with files:

  $ svgo test.svg
  

  or:

  $ svgo *.svg
  

  $ svgo test.svg -o test.min.svg
  

  $ svgo test.svg other.svg third.svg
  

  $ svgo test.svg other.svg third.svg -o test.min.svg -o other.min.svg -o third.min.svg
  

• with STDIN / STDOUT:

  $ cat test.svg | svgo -i - -o - > test.min.svg
  

• with folder

  $ svgo -f ../path/to/folder/with/svg/files
  

  or:

  $ svgo -f ../path/to/folder/with/svg/files -o ../path/to/folder/with/svg/output
  

  $ svgo *.svg -o ../path/to/folder/with/svg/output
  

• with strings:

  $ svgo -s '<svg version="1.1">test</svg>' -o test.min.svg
  

  or even with Data URI base64:

  $ svgo -s 'data:image/svg+xml;base64,...' -o test.min.svg
  

• with SVGZ:

  from .svgz to .svg:

  $ gunzip -c test.svgz | svgo -i - -o test.min.svg
  

  from .svg to .svgz:

  $ svgo test.svg -o - | gzip -cfq9 > test.svgz
  

Other Ways to Use SVGO

• as a web app – SVGOMG
• as a Nodejs module – examples
• 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 macOS app - Image Shrinker
• as a Rollup plugin - rollup-plugin-svgo

Backers

SheetJS LLC	Fontello

Donations

• PayPal: https://www.paypal.me/deepsweet

License and Copyright

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

Logo by Yegor Bolshakov.