Skip to content

Instantly share code, notes, and snippets.

@ahaywood
Last active June 13, 2022 12:54
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ahaywood/66044d7d2c61821a96ba5a56232094c7 to your computer and use it in GitHub Desktop.
Save ahaywood/66044d7d2c61821a96ba5a56232094c7 to your computer and use it in GitHub Desktop.
svgo Config File

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
{
"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)" }
}
]
}
@PhOder
Copy link

PhOder commented Oct 6, 2021

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.

@hsellik
Copy link

hsellik commented Feb 21, 2022

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)',
            },
        },
    ],
};

@RadekJakGit
Copy link

RadekJakGit commented Jun 13, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment