Skip to main content
Sheelah Brennan

How to Configure SVGO to Preserve SVG Path IDs

While adding some SVG files recently to a website I worked on, I used a grunt plugin, grunt-svgmin, to minify the SVGs. Grunt-svgmin is SVGO under the hood. Once I ran it, I unfortunately, I discovered that the path IDs for the SVGs were minified as well, meaning that the custom CSS styling I had added using those IDs was no longer working.

Luckily, the fix was an easy configuration change, once I figured out what it was. I had to add a cleanupIDs: false parameter in the right place within my Grunt config, and then my path IDs were spared from the wrath of minification.

svgmin: {
     options: {
         full: true,
         plugins: [
             {removeViewBox: false},
             {removeUselessStrokeAndFill: false},
             {cleanupIDs: false}
         ]
      },

Follow Me

Built with ♥ and Gatsby, hosted on Netlify

My new Skillshare course: Make Your Website Stand Out