imagemin-svgo

imagemin-svgo is an imagemin plugin that integrates SVGO (SVG Optimizer) for optimizing SVG images. It provides a bridge between the imagemin image processing pipeline and SVGO's SVG optimization capabilities, allowing developers to compress and optimize SVG files by removing unnecessary metadata, comments, and redundant code while maintaining visual fidelity.

Package Information

• Package Name: imagemin-svgo
• Package Type: npm
• Language: JavaScript (ES Modules)
• Installation: npm install imagemin-svgo

Core Imports

import imageminSvgo from 'imagemin-svgo';

Note: This package uses ES modules and requires Node.js 18+ with module support. For CommonJS environments, use dynamic import:

const imageminSvgo = (await import('imagemin-svgo')).default;

Basic Usage

import imagemin from 'imagemin';
import imageminSvgo from 'imagemin-svgo';

// Basic optimization with default settings
await imagemin(['images/*.svg'], {
  destination: 'build/images',
  plugins: [
    imageminSvgo()
  ]
});

// With custom SVGO options
await imagemin(['images/*.svg'], {
  destination: 'build/images',
  plugins: [
    imageminSvgo({
      plugins: [{
        name: 'removeViewBox',
        active: false
      }]
    })
  ]
});

console.log('SVG images optimized');

Architecture

imagemin-svgo follows the imagemin plugin architecture pattern:

• Plugin Factory: The default export is a factory function that accepts SVGO options and returns an imagemin-compatible plugin function
• Plugin Function: The returned function processes individual file buffers asynchronously
• SVGO Integration: Internally uses SVGO's optimize() function with automatic SVG validation via is-svg
• Buffer Handling: Accepts both Buffer and string inputs, always returns Buffer outputs for consistency with imagemin

Capabilities

SVG Optimization Plugin

Creates an imagemin-compatible plugin for optimizing SVG files using SVGO.

/**
 * Creates an imagemin plugin for SVG optimization using SVGO
 * @param {SvgoOptions} [options] - SVGO configuration options with multipass: true by default
 * @returns {function} - Imagemin plugin function that processes SVG buffers
 */
function imageminSvgo(options?: SvgoOptions): (buffer: Buffer | string) => Promise<Buffer>

The returned plugin function has the following signature:

/**
 * Process SVG buffer or string through SVGO optimization
 * @param {Buffer|string} buffer - SVG content to optimize (non-SVG content returned unchanged)
 * @returns {Promise<Buffer>} - Optimized SVG as Buffer, or original buffer if not valid SVG
 */
(buffer: Buffer | string) => Promise<Buffer>

Parameters:

• options (Object, optional): SVGO configuration options
  • multipass (boolean, default: true): Enable multiple optimization passes
  • plugins (Array, optional): Array of SVGO plugin configurations
  • All other SVGO configuration options are supported

Returns:

• Function that accepts a Buffer or string and returns a Promise<Buffer>

Behavior:

• Non-SVG content is returned unchanged (validated using is-svg package)
• Input can be either Buffer or string format
• Output is always a Buffer containing optimized SVG content
• Uses SVGO internally with multipass optimization enabled by default

Usage Examples

Direct plugin usage:

import imageminSvgo from 'imagemin-svgo';

// Create optimizer with options
const optimizer = imageminSvgo({
  plugins: [{
    name: 'preset-default',
  }, {
    name: 'removeScriptElement',
    active: true,
  }]
});

// Process SVG content
const svgBuffer = Buffer.from('<svg><script></script></svg>');
const optimized = await optimizer(svgBuffer);
console.log(optimized.toString()); // <svg/>

Plugin configuration examples:

// Disable viewBox removal
imageminSvgo({
  plugins: [{
    name: 'removeViewBox',
    active: false
  }]
})

// Custom plugin configuration
imageminSvgo({
  plugins: [{
    name: 'preset-default',
    params: {
      overrides: {
        removeUnknownsAndDefaults: {
          keepDataAttrs: false,
          keepAriaAttrs: false
        }
      }
    }
  }]
})

// Minimal optimization
imageminSvgo({
  plugins: ['preset-default']
})

Types

interface SvgoOptions {
  /** Enable multiple optimization passes (default: true) */
  multipass?: boolean;
  /** Array of SVGO plugin configurations */
  plugins?: PluginConfig[];
  /** Additional SVGO configuration options */
  [key: string]: any;
}

interface PluginConfig {
  /** Plugin name */
  name: string;
  /** Whether plugin is active (default: true) */
  active?: boolean;
  /** Plugin-specific parameters */
  params?: object;
}

Error Handling

The plugin gracefully handles various input scenarios:

• Non-SVG content: Validated by is-svg package and returned unchanged as the original buffer
• Invalid/malformed SVG: May pass through SVGO without throwing errors (SVGO's internal error handling)
• Buffer vs String input: Automatically converts string input to Buffer internally for processing
• Empty or null input: Handled by underlying SVGO error handling

Note: SVGO may not always throw proper errors for malformed SVG content, as observed in the package's test suite.

Dependencies

• is-svg (^5.0.1): SVG content validation
• svgo (^3.3.2): Core SVG optimization engine