SVGs containing paths with boolean operations are not processed correctly

[WillsB3]

I'm not great with vector apps, but I'm having some difficulty getting this plugin to process some SVG's I've been given correctly.

Take this test SVG for example. If I open it with preview in OS X or Sketch it looks like this:

Once processed by grunt-dr-svg-sprites however, it looks like this in both the browser and Adobe Illustrator:

Oddly enough it still looks fine when the generated sprite SVG is loaded back into sketch:

Is this something I'm doing wrong or could this be caused by this plugin or Sketch's export process?

[phloe]

The problem lies in the svgo module that is used under the hood :( By default svgo is run with all of its plugins enabled - which in this case is causing trouble. Plugins can be configured through options.svgo though. But finding the plugin that is tripping up the svg can be a bit of a pain... The full list is here.

[bomberstudios]

Check this out: https://gist.github.com/chadclark/d54769526f0dfaaa62ea

[phloe]

@bomberstudios Thanks for the heads up! It looks like it's the removeUselessStrokeAndFill-plugin that's messing up the svg.

var options = {
    // some options
    svg: {
        plugins: [
            { removeUselessStrokeAndFill: false }
        ]
    }
    // more options
};

[bomberstudios]

Always happy to help : )

[phloe]

FWIW I just added some defaults for the svgo config; removeUselessStrokeAndFill is now disabled by default. Live in dr-svg-sprites 0.9.14 :)