svgo

⚙️ Node.js tool for optimizing SVG files

20,817

1,383

20,817

234

View on GitHub View on NPM

Top Related Projects

svgcleaner

1,624

svgcleaner could help you to clean up your SVG files from the unnecessary data.

Quick Overview

SVGO (SVG Optimizer) is a Node.js-based tool for optimizing SVG files. It reduces file size by removing unnecessary information and performing various optimizations, making SVGs more efficient for web use. SVGO can be used as a command-line tool, a Node.js module, or integrated into various build processes.

Pros

Significantly reduces SVG file size, improving website performance
Highly configurable with numerous optimization plugins
Can be used as a CLI tool, Node.js module, or integrated into build systems
Actively maintained with regular updates and improvements

Cons

Some optimizations may alter SVG appearance or functionality if not configured properly
Learning curve for advanced configurations and custom plugins
Occasional compatibility issues with certain SVG features or editors

Code Examples

Basic usage as a Node.js module:

import { optimize } from 'svgo';

const result = optimize(svgString, {
  multipass: true
});

console.log(result.data); // optimized SVG string

Using custom configuration:

import { optimize } from 'svgo';

const result = optimize(svgString, {
  plugins: [
    'preset-default',
    'removeViewBox',
    {
      name: 'sortAttrs',
      params: {
        xmlnsOrder: 'alphabetical'
      }
    }
  ]
});

Optimizing SVG from a file:

import { readFileSync, writeFileSync } from 'fs';
import { optimize } from 'svgo';

const svgString = readFileSync('input.svg', 'utf8');
const result = optimize(svgString);
writeFileSync('output.svg', result.data);

Getting Started

To use SVGO in your project:

Install SVGO:
```
npm install svgo
```

Basic usage in Node.js:

import { optimize } from 'svgo';

const svgString = '<svg>...</svg>';
const result = optimize(svgString);
console.log(result.data); // optimized SVG

CLI usage:
```
npx svgo input.svg -o output.svg
```

For more advanced configurations and usage, refer to the SVGO documentation on GitHub.

Competitor Comparisons

svgcleaner

1,624

svgcleaner could help you to clean up your SVG files from the unnecessary data.

Pros of svgcleaner

Written in Rust, offering better performance and memory efficiency
More aggressive optimization, potentially resulting in smaller file sizes
Supports batch processing of multiple SVG files

Cons of svgcleaner

Less actively maintained compared to SVGO
Fewer configuration options and plugins
May occasionally produce rendering issues due to aggressive optimization

Code Comparison

svgcleaner:

use svgcleaner::cleaner;

let input = "<svg>...</svg>";
let mut output = Vec::new();
cleaner::clean_from_read(input.as_bytes(), &mut output, &opts).unwrap();

SVGO:

const svgo = require('svgo');

const result = svgo.optimize(svgString, {
  multipass: true,
  plugins: ['removeViewBox', 'removeDimensions']
});
console.log(result.data);

Both tools aim to optimize SVG files, but they differ in implementation and features. SVGO is more widely used and offers greater flexibility through its plugin system, while svgcleaner focuses on performance and aggressive optimization. The choice between the two depends on specific project requirements, such as file size constraints, rendering accuracy, and the need for customization.

svgomg

5,756

Web GUI for SVGO

Pros of SVGOMG

Web-based interface for easy accessibility and use without installation
Real-time preview of optimized SVG
Ability to adjust optimization settings visually

Cons of SVGOMG

Limited to browser environment, not suitable for server-side or CLI usage
Fewer advanced configuration options compared to SVGO
May not be as easily integrated into automated workflows

Code Comparison

SVGO (Node.js):

const svgo = require('svgo');
const result = svgo.optimize(svgString, {
  multipass: true,
  plugins: ['removeViewBox', 'cleanupIDs']
});
console.log(result.data);

SVGOMG (Browser):

// No direct code comparison available as SVGOMG is a web application
// Usage involves interacting with the UI at svgomg.net

Summary

SVGO is a powerful Node.js-based SVG optimizer with extensive configuration options and CLI support, making it suitable for various environments and automation. SVGOMG, built on top of SVGO, offers a user-friendly web interface for quick SVG optimization with visual feedback. While SVGOMG sacrifices some advanced features and flexibility, it provides an accessible solution for users who prefer a graphical interface and immediate results without setup.

svgo-gui

1,665

Node-WebKit based GUI for SVGO

Pros of SVGO-GUI

User-friendly graphical interface for easier SVG optimization
Visual preview of optimized SVGs before saving
Drag-and-drop functionality for quick file processing

Cons of SVGO-GUI

Limited to desktop use, unlike the command-line SVGO
May have fewer advanced configuration options
Potentially slower for batch processing large numbers of files

Code Comparison

SVGO (Command-line usage):

svgo input.svg -o output.svg

SVGO-GUI (Electron app initialization):

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Both SVGO and SVGO-GUI are tools for optimizing SVG files, but they cater to different user needs. SVGO is a powerful command-line tool offering extensive configuration options and is suitable for integration into build processes. SVGO-GUI, on the other hand, provides a more accessible interface for users who prefer visual interaction and immediate feedback on their SVG optimizations. While SVGO-GUI may be more limited in terms of advanced features and batch processing capabilities, it offers a more intuitive experience for casual users or those new to SVG optimization.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

SVGO

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

License and Copyright

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

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of svgcleaner

Cons of svgcleaner

Code Comparison

Pros of SVGOMG

Cons of SVGOMG

Code Comparison

Summary

Pros of SVGO-GUI

Cons of SVGO-GUI

Code Comparison

Convert designs to code with AI

README

SVGO

Why?

Installation

Command-line usage

Configuration

Default preset

Custom plugins

API usage

optimize

loadConfig

Donors

License and Copyright

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days