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!

5 comments:

  1. Thank you, kind sir! This has helped me out.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hello.
    I'v got this kind of code for gulp svg icons. The problem is that SVGO plugins doesn't work.

    'convertShapeToPath: false' ---- can't be applied

    In the code I deleted first "<" symbol to show it in the message.
    On the input I have:

    svg>
    g>
    rect x="0" y="0" style="fill:#50ABF1;" width="455.731" height="455.731"/>
    path style="fill:#FFFFFF;" d="..."/>
    /g>
    /svg>

    On the output I have:

    svg>
    symbol id="someid" viewBox="0 0 455.731 455.731">
    path d="M0 0h455.731v455.731H0z" style="fill:currentColor"/>
    path d="..." style="fill:currentColor"/>
    /symbol>
    /svg>

    This code below cannot make plugins work. How can I configure gulp task properly?


    gulp.task('SVG', function() {
    return gulp.src('dev/images/SVG/*.svg')
    .pipe(svgmin(
    {
    js2svg: {
    pretty: true
    }
    },
    {plugins: [{convertShapeToPath: false}]
    },
    function getOptions (file) {
    var prefix = path.basename(file.relative, path.extname(file.relative));
    return {
    plugins: [
    {cleanupIDs: {
    prefix: prefix + '-',
    minify: true
    }
    }
    ]
    }
    }
    ))
    .pipe (cheerio({
    run: function ($) {
    $('[fill]').removeAttr('fill');
    $('path').attr('style', 'fill:currentColor').html();
    },
    parserOptions: { xmlMode: true }
    }))
    .pipe(svgstore({inlineSvg: true}))
    .pipe(gulp.dest('prod/images'))
    .pipe(browserSync.reload({stream: true}))
    });

    ReplyDelete
  4. Awesome work in this article I am glad to see your post
    outlook customer care keep posting.

    ReplyDelete
  5. If you are facing any problem regarding the Gmail, just visit the given link-Gmail Contact Number

    ReplyDelete