Stop SVGO and GULP-SVGMIN from Breaking Paths and Colors in SVG Images

When practical, I like to use vector images on my websites. They are great for responsive design, and look much more clean and crisp than PNG or JPG images. Of course, I am also a fan of performance, and SVG files can often come significantly larger than they need to be.

For JPG and PNG images, I use a tool called Trimage to compress them. For SVG files, I use SVGO. Actually, I use the gulp package gulp-svgmin, but that is just a gulp wrapper for SVGO.

The problem with SVGO, is that with the default settings, it tends to break many SVG images that come out of tools like Adobe Illustrator. For your benefit, I have trial-and-error'd my way through all of the SVGO plugins and isolated the options which cause issues.

If your SVG image paths are breaking, turn off convertPathData and mergePaths.

If your colors are turning black or being removed, turn off removeUnknownsAndDefaults.

There have also been reports of issues with collapseGroups, but I have not had an issue yet.

Here is a snippet from the gulp file I am currently using:

var gulp = require('gulp');
var svgmin = require('gulp-svgmin');
var debug = require('gulp-debug');

gulp.task('compress', function () {
  return gulp.src('./public/img/**/*.svg')
    .pipe(debug())
    .pipe(svgmin({plugins: [
      { convertPathData: false } // breaks paths
      , { mergePaths: false } // breaks paths
      , { removeUnknownsAndDefaults: false } // breaks colors
    ]}))
    .pipe(gulp.dest('./public/img/'));
});

SVG image files may still be larger than PNG counterparts, but I find that using a gzip compression tool like the nodejs compression package can often crunch these optimized SVG files another 300%, making them significantly smaller than gzipped PNG files, and they look so much better!