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)" }
    }
  ]
}

I get an error with this, the error says plug-in requires a name.

Error: Plugin name should be specified

I get an error with this, the error says plug-in requires a name.

Error: Plugin name should be specified

@LanceMeister

I think i'm getting the same error as you are.

Error: Plugin name should be specified
at resolvePluginConfig (/usr/local/lib/node_modules/svgo/lib/svgo/config.js:98:13)
at /usr/local/lib/node_modules/svgo/lib/svgo.js:46:7
at Array.map ()
at optimize (/usr/local/lib/node_modules/svgo/lib/svgo.js:45:37)
at processSVGData (/usr/local/lib/node_modules/svgo/lib/svgo/coa.js:361:18)
at /usr/local/lib/node_modules/svgo/lib/svgo/coa.js:344:7
at async Promise.all (index 2)
at async Command.action (/usr/local/lib/node_modules/svgo/lib/svgo/coa.js:237:7)
at async Promise.all (index 0)

Did you ever find a fix for this?

@ahaywood have you heard or ran into this issue. I've tried it 2 different macs and tried googling it but didn't come up with any search results.

The only thing I had to do different was run this command npm -g install svgo with sudo
When I tried with out sudo I get this error:

npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /usr/local/lib/node_modules/svgo
npm ERR! dest /usr/local/lib/node_modules/.svgo-hwf20Gcn
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/svgo' -> '/usr/local/lib/node_modules/.svgo-hwf20Gcn'
npm ERR! [Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/svgo' -> '/usr/local/lib/node_modules/.svgo-hwf20Gcn'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'rename',
npm ERR! path: '/usr/local/lib/node_modules/svgo',
npm ERR! dest: '/usr/local/lib/node_modules/.svgo-hwf20Gcn'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/dtm/.npm/_logs/2021-07-25T18_33_13_008Z-debug.log

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.