Grunt tasks to minify SVG using SVGO
SVG files, especially exported from various editors, usually contains a lot of redundant and useless information such as editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting SVG rendering result.
If you haven't used grunt before, be sure to check out the Getting Started guide, as it explains how to create a gruntfile as well as install and use grunt plugins. Once you're familiar with that process, install this plugin with this command:
npm install --save-dev grunt-svgminOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-svgmin');See the Gruntfile in this repo for a full example.
grunt.initConfig({
svgmin: { // Task
options: { // Configuration that will be passed directly to SVGO
plugins: [{
removeViewBox: false
}]
},
dist: { // Target
files: { // Dictionary of files
'dist/figure.svg': 'app/figure.svg' // 'destination': 'source'
}
}
}
});
grunt.loadNpmTasks('grunt-svgmin');
grunt.registerTask('default', ['svgmin']);grunt.initConfig({
svgmin: { // Task
options: { // Configuration that will be passed directly to SVGO
plugins: [{
removeViewBox: false
}]
},
dist: { // Target
files: [{ // Dictionary of files
expand: true, // Enable dynamic expansion.
cwd: 'img/src', // Src matches are relative to this path.
src: ['**/*.svg'], // Actual pattern(s) to match.
dest: 'img/', // Destination path prefix.
ext: '.min.svg' // Dest filepaths will have this extension.
// ie: optimise img/src/branding/logo.svg and store it in img/branding/logo.min.svg
}]
}
});
grunt.loadNpmTasks('grunt-svgmin');
grunt.registerTask('default', ['svgmin']);svgmin makes use of the standard SVGO plugin architecture. Therefore, to customize SVG optimisation, you can disable/enable any SVGO plugins listed at the SVGO repository.
To disable plugins with the Gruntfile.js, look for the plugin name at the SVGO repository and copy the plugin name (minus the file extension). Then set its value in the JSON to false. To exemplify, here is how the plugins section in the example configuration (illustrated above) might be written with some of the standard SVGO plugins disabled:
plugins: [{
removeViewBox: false, // don't remove the viewbox atribute from the SVG
removeUselessStrokeAndFill: false, // don't remove Useless Strokes and Fills
removeEmptyAttrs: false // don't remove Empty Attributes from the SVG
}]MIT © Sindre Sorhus