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}
]
},