Skip to main content

SVGO npm chat docs

SVGO, short for SVG Optimizer, is a Node.js library and command-line application for optimizing SVG files.

Why?​

SVG files, especially those exported from vector editors, usually contain a lot of redundant information. This includes editor metadata, comments, hidden elements, default or suboptimal values, and other stuff that can be safely removed or converted without impacting rendering.

Installation​

You can install SVGO globally through npm, yarn, or pnpm. Alternatively, drop the global flag (global/-g) to use it in your Node.js project.

# npm
npm install -g svgo

# yarn
yarn global add svgo

# pnpm
pnpm add -g svgo

Command-line usage​

Process single files:

svgo one.svg two.svg -o one.min.svg two.min.svg

Process a directory of files recursively with -r/--recursive and -f/--folder:

svgo -rf path/to/directory_with_svgs -o path/to/output_directory

Help for advanced usage:

svgo --help

Configuration​

SVGO has a plugin architecture. You can read more about all plugins in Plugins | SVGO Documentation, and the default plugins in Preset Default | SVGO Documentation.

SVGO reads the configuration from svgo.config.mjs or the --config path/to/config.mjs command-line option. Some other parameters can be configured though command-line options too.

svgo.config.mjs

export default {
  multipass: false, // boolean
  datauri: 'base64', // 'base64'|'enc'|'unenc'
  js2svg: {
    indent: 4, // number
    pretty: false, // boolean
  },
  plugins: [
    'preset-default', // built-in plugins enabled by default
    'prefixIds', // enable built-in plugins by name

    // enable built-in plugins with an object to configure plugins
    {
      name: 'prefixIds',
      params: {
        prefix: 'uwu',
      },
    },
  ],
};

Default preset​

Instead of configuring SVGO from scratch, you can tweak the default preset to suit your needs by configuring or disabling the respective plugin.

svgo.config.mjs

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // disable a default plugin
          cleanupIds: false,

          // customize the params of a default plugin
          inlineStyles: {
            onlyMatchedOnce: false,
          },
        },
      },
    },
  ],
};

You can find a list of the default plugins in the order they run in Preset Default | SVGO Documentation.

Custom plugins​

You can also specify custom plugins:

svgo.config.mjs

import importedPlugin from './imported-plugin';

export default {
  plugins: [
    // plugin imported from another JavaScript file
    importedPlugin,

    // plugin defined inline
    {
      name: 'customPlugin',
      params: {
        paramName: 'paramValue',
      },
      fn: (ast, params, info) => {},
    },
  ],
};

API usage​

SVGO provides a few low level utilities.

optimize​

The core of SVGO is optimize function.

import { optimize } from 'svgo';

const result = optimize(svgString, {
  path: 'path-to.svg', // recommended
  multipass: true, // all other config fields are available here
});

const optimizedSvgString = result.data;

loadConfig​

If you write a tool on top of SVGO you may want to resolve the svgo.config.mjs file.

import { loadConfig } from 'svgo';

const config = await loadConfig();

You can also specify a path and customize the current working directory.

const config = await loadConfig(configFile, cwd);

Donors​

SheetJS LLCFontello

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

Logo by André Castillo.