svgo-loader

What is svgo-loader?

svgo-loader is an npm package that optimizes SVG files by using the SVGO (SVG Optimizer) library. It is typically used as a loader in webpack configurations to automatically optimize SVG files during the build process, reducing file size and improving performance.

What are svgo-loader's main functionalities?

Basic SVG Optimization

This feature allows you to optimize SVG files by applying various SVGO plugins. The code sample demonstrates a basic webpack configuration that uses svgo-loader to remove titles, convert colors, and disable path data conversion.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                { removeTitle: true },
                { convertColors: { shorthex: false } },
                { convertPathData: false }
              ]
            }
          }
        ]
      }
    ]
  }
};

Custom Plugin Configuration

This feature allows you to customize the SVGO plugins used during the optimization process. The code sample shows how to configure svgo-loader to remove dimensions and specific attributes like stroke and fill from SVG files.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                { removeDimensions: true },
                { removeAttrs: { attrs: '(stroke|fill)' } }
              ]
            }
          }
        ]
      }
    ]
  }
};

Integration with Other Loaders

This feature demonstrates how svgo-loader can be integrated with other loaders like babel-loader in a webpack configuration. The code sample shows a setup where SVG files are first processed by babel-loader and then optimized by svgo-loader.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          'babel-loader',
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                { removeViewBox: false }
              ]
            }
          }
        ]
      }
    ]
  }
};

Other packages similar to svgo-loader

image-webpack-loader

image-webpack-loader is a similar package that optimizes images, including SVGs, during the webpack build process. It uses various optimization tools like imagemin and SVGO. Compared to svgo-loader, image-webpack-loader is more versatile as it supports multiple image formats, not just SVG.

svg-url-loader

svg-url-loader is a webpack loader that inlines SVGs as URLs. It can also optimize SVGs using SVGO. Compared to svgo-loader, svg-url-loader provides additional functionality by converting SVGs into data URLs, which can be useful for embedding SVGs directly into HTML or CSS.

README

svgo loader for webpack

Install

$ npm install svgo svgo-loader --save-dev

... or with Yarn

$ yarn add svgo svgo-loader -D

DON'T FORGET TO INSTALL / UPDATE THE svgo PACKAGE after you update svg-loader (see #20)

Usage

Documentation: Using loaders

Svgo-loader just passes config to the svgo library.

Put the SVGO config into loader's options

module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {loader: 'file-loader'},
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                {removeTitle: true},
                {convertColors: {shorthex: false}},
                {convertPathData: false}
              ]
            }
          }
        ]
      }
    ]
  }
}

Or use an external config like you would with SVGO CLI

module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {loader: 'file-loader'},
          {
            loader: 'svgo-loader',
            options: {
              externalConfig: "svgo-config.yml"
            }
          }
        ]
      }
    ]
  }
}

In svgo-config.yml:

plugins:
  - removeTitle: true
  - convertPathData: false
  - convertColors:
      shorthex: false

You can use YML or JSON files as external configs.

Legacy Webpack v1 config

There are two ways of loading svgo configuration. You can pass it as a JSON string after loader name, like this:

// webpack.config.js

var svgoConfig = JSON.stringify({
  plugins: [
    {removeTitle: true},
    {convertColors: {shorthex: false}},
    {convertPathData: false}
  ]
});

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /.*\.svg$/,
        loaders: [
          'file-loader',
          'svgo-loader?' + svgoConfig
        ]
      }
    ]
  }
}

Or you can save svgo config in your main webpack config object, and then specify name of the property in the loader query string.

However, this option will not work in Webpack 2.
This is only shown here in the documentation for backwards compatibility.

// webpack.config.js

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /.*\.svg$/,
        loaders: [
          'file-loader',
          'svgo-loader?useConfig=svgoConfig1'
        ]
      }
    ]
  },
  svgoConfig1: {
    plugins: [
      {removeTitle: true},
      {convertColors: {shorthex: false}},
      {convertPathData: false}
    ]
  }
}