svgo-loader

5.0.0 verified Sat Apr 25 auth: no javascript

A webpack loader for optimizing SVG files using SVGO (Squeeze SVG). Current stable version is 5.0.0, which requires SVGO v4 and Webpack 4/5. Release cadence is irregular with major version bumps tied to SVGO major releases. Key differentiators: directly integrates SVGO optimization into webpack build pipeline, supports config file loading (e.g., svgo.config.js), and allows inline options override. Unlike other SVG optimization plugins, it delegates all configuration to SVGO's standard format.

Common errors

error Module not found: Error: Can't resolve 'svgo' ↓

cause svgo is a peer dependency not automatically installed.

fix

Run 'npm install svgo --save-dev' or 'yarn add svgo -D'.

error Error: SVGO config not found at /path/to/svgo.config.js ↓

cause Loader searches for svgo.config.js by default but file missing.

fix

Set configFile: false in loader options to disable default config loading.

error Error: Rule can only have one source, but found more than one (asset, svgo-loader) ↓

cause Conflict when both 'type: asset' and 'loader' are used improperly.

fix

Ensure rule has only one type property (e.g., 'type: asset') and 'loader' specified.

Warnings

breaking Version 5.0.0 switches to SVGO v4, which has breaking changes from SVGO v3. See SVGO v4 changelog for plugin updates. ↓

fix Update SVGO plugin configurations to be compatible with SVGO v4 format.

breaking Version 4.0.0 removes Webpack 4 support. Only webpack 5 is supported. ↓

fix Upgrade to webpack 5 or pin to svgo-loader@3.x.

breaking Version 4.0.0 switched to SVGO 3, which changed the plugin format from SVGO 2. Plugins must be specified differently. ↓

fix Review SVGO v3 migration guide and update plugin list accordingly.

gotcha The loader expects a 'type: asset' or 'type: asset/resource' rule to emit the file; otherwise no output. ↓

fix Add type: 'asset' to your rule configuration.

gotcha If configFile is not set, the loader looks for svgo.config.js which may not exist, causing errors. ↓

fix Explicitly set configFile: false or create a valid svgo.config.js.

Install

npm install svgo-loader

yarn add svgo-loader

pnpm add svgo-loader

Imports

Loader

wrong

import svgoLoader from 'svgo-loader'

correct

module.exports = { module: { rules: [ { test: /\.svg$/, loader: 'svgo-loader', options: { ... } } ] } }

This is a webpack loader, not a JavaScript module. It is used via webpack configuration, not imported in source code.

Plugin
```
No plugin import needed. Use as loader in webpack config.
```
There is no JavaScript import available. The loader is referenced by string in webpack config rules.

Config

wrong

const config = require('svgo-loader/config.js')

correct

Use svgo.config.js file or pass options directly in webpack config.

SVGO configuration is external, not provided by svgo-loader package.

Quickstart

Basic webpack configuration to optimize SVGs with SVGO, disabling external config and providing inline plugin list and options.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset',
        loader: 'svgo-loader',
        options: {
          configFile: false, // disable external config
          multipass: true,
          js2svg: { indent: 2, pretty: true },
          plugins: [
            'removeDoctype',
            'removeXMLProcInst',
            'removeComments',
            'removeMetadata',
            'removeEditorsNSData',
            'cleanupAttrs',
            'inlineStyles',
            'minifyStyles',
            'convertStyleToAttrs',
            'cleanupIDs',
            'removeRasterImages',
            'removeUselessDefs',
            'cleanupNumericValues',
            'convertColors',
            'removeUnknownsAndDefaults',
            'removeNonInheritableGroupAttrs',
            'removeUselessStrokeAndFill',
            'removeViewBox',
            'cleanupEnableBackground',
            'removeHiddenElems',
            'removeEmptyText',
            'convertShapeToPath',
            'convertEllipseToCircle',
            'moveElemsAttrsToGroup',
            'moveGroupAttrsToElems',
            'collapseGroups',
            'convertPathData',
            'convertTransform',
            'removeEmptyAttrs',
            'removeEmptyContainers',
            'mergePaths',
            'removeUnusedNS',
            'sortAttrs',
            'sortDefsChildren',
            'removeTitle',
            'removeDesc',
            'removeDimensions',
            'removeAttrs',
            'removeElementsByAttr',
            'addClassesToSVGElement',
            'addAttributesToSVGElement',
            'removeOffCanvasPaths',
            'removeStyleElement',
            'removeScriptElement',
            'reusePaths'
          ]
        }
      }
    ]
  }
};