svgo Config File

README.md

This is a config file to be used with svgo's command line tool.

You can ues it with the following command:

svgo *.svg --config=/PATH-TO-FILE/svgo-config.yml

svgo-config.json

{
  "plugins": [
    {
      "cleanupAttrs": true
    },
    {
      "removeDoctype": true
    },
    {
      "removeXMLProcInst": true
    },
    {
      "removeComments": true
    },
    {
      "removeMetadata": true
    },
    {
      "removeTitle": true
    },
    {
      "removeDesc": true
    },
    {
      "removeUselessDefs": true
    },
    {
      "removeEditorsNSData": true
    },
    {
      "removeEmptyAttrs": true
    },
    {
      "removeHiddenElems": true
    },
    {
      "removeEmptyText": true
    },
    {
      "removeEmptyContainers": true
    },
    {
      "removeViewBox": false
    },
    {
      "cleanUpEnableBackground": true
    },
    {
      "convertStyleToAttrs": true
    },
    {
      "convertColors": true
    },
    {
      "convertPathData": true
    },
    {
      "convertTransform": true
    },
    {
      "removeUnknownsAndDefaults": true
    },
    {
      "removeNonInheritableGroupAttrs": true
    },
    {
      "removeUselessStrokeAndFill": true
    },
    {
      "removeUnusedNS": true
    },
    {
      "cleanupIDs": true
    },
    {
      "cleanupNumericValues": true
    },
    {
      "moveElemsAttrsToGroup": true
    },
    {
      "moveGroupAttrsToElems": true
    },
    {
      "collapseGroups": true
    },
    {
      "removeRasterImages": false
    },
    {
      "mergePaths": true
    },
    {
      "convertShapeToPath": true
    },
    {
      "sortAttrs": true
    },
    {
      "transformsWithOnePath": false
    },
    {
      "removeDimensions": true
    },
    {
      "removeAttrs": { "attrs": "(stroke|fill)" }
    }
  ]
}

Just an fyi for people that might come here after me:
For me the above config file didn't work. I think the reason for me (not 100% sure though) was that the config format changed between svgo v1.x and v2.x. the config file dates back quite a bit and I'm not sure whether it was updated to the new format.

So for everyone doing an npm i -D svgo which will install the current (2.7.0 as of today) who is wondering why this config is not working: you might want to check svgo's configuration.

@ahaywood Thank you very much for your great tutorial on SVG sprite generation =) It gave me a very good idea of how to create SVG sprites!

However, in the end I ended up using svg-sprite via gulp-svg-sprite. It uses svgo under the hood and allows a little more configuration of how the SVG sprite will be created. To me it seemed to make the "add/edit SVG and recreate sprite" process a little more comfortable but it does require a little more upfront setup.

Something like this should result in a similar configuration for v2.x:

module.exports = {
    plugins: [
        {
            name: 'preset-default',
            params: {
                overrides: {
                    removeViewBox: false,
                    removeRasterImages: false,
                    transformsWithOnePath: false,
                },
            },
        },
        "cleanupEnableBackground",
        "cleanupAttrs",
        "removeDoctype",
        "removeXMLProcInst",
        "removeComments",
        "removeMetadata",
        "removeTitle",
        "removeDesc",
        "removeUselessDefs",
        "removeEditorsNSData",
        "removeEmptyAttrs",
        "removeHiddenElems",
        "removeEmptyText",
        "removeEmptyContainers",
        "convertStyleToAttrs",
        "convertColors",
        "convertPathData",
        "convertTransform",
        "removeUnknownsAndDefaults",
        "removeNonInheritableGroupAttrs",
        "removeUselessStrokeAndFill",
        "removeUnusedNS",
        "cleanupIDs",
        "cleanupNumericValues",
        "moveElemsAttrsToGroup",
        "moveGroupAttrsToElems",
        "collapseGroups",
        "mergePaths",
        "convertShapeToPath",
        "sortAttrs",
        "removeDimensions",
        {
            name: 'removeAttrs',
            params: {
                attrs: '(stroke|fill)',
            },
        },
    ],
};

with this obsolete version it works!
https://www.npmjs.com/package/svgo/v/1.2.0
npm i -g [email protected]

unfortunately doesn't work for me =(
--config Custom config file, only .js is supported

Hello everyone! Is there anyone from 2025? 🚀

If you want to follow up ahaywood tutorial, you have to update svgo-config.js for SVGO v3+, you might have noticed that some plugins have changed or been removed. Many older configurations no longer work, and you may see errors like:

❌ Error: Unknown builtin plugin "cleanupIDs" specified.

🔹 Key Changes in SVGO v3+

1️⃣ cleanupIDs has been removed – This plugin no longer exists, so remove it from your config.
2️⃣ removeAttrs now requires an array format – Use { attrs: ["stroke", "fill"] } instead of a regex.
3️⃣ preset-default includes essential optimizations – No need to manually list common plugins.
4️⃣ multipass: true is recommended – Enables multiple optimization passes for smaller file sizes.
5️⃣ The config file must be .js (not .json) – Use export default {} instead of JSON format.‼️🚩

✅ Working SVGO v3+ Configuration

Here's a valid svgo-config.js for 2025 and beyond:

export default {
  multipass: true, 
  js2svg: {
    indent: 2,
    pretty: false, 
  },
  plugins: [
    "preset-default",
    {
      name: "removeViewBox",
      active: false, 
    },
    {
      name: "removeDimensions",
      active: true,
    },
    {
      name: "removeAttrs",
      params: { attrs: ["stroke", "fill"] },
    },
    {
      name: "sortAttrs",
      active: true, 
    },
    {
      name: "mergePaths",
      active: true, 
    },
    {
      name: "convertStyleToAttrs",
      active: true,
    },
  ],
};

🔹 How to Use It

Run the following command in your terminal:

svgo *.svg --config=/PATH-TO-FILE/svgo-config.js

With this setup, your SVG optimization will be fully compatible with SVGO v3+ in 2025! 🚀🎨
Hope this helps! If you find new updates, feel free to share.