svgo Feature Req: Add Option to remove/flatten all clipPath and all mask elements

SVGs exported from Adobe Illustrator make often extensive use of clipPath and mask elements. Sometimes those clipped or masked elements are as big as the image even if the part displayed in the end is very small. Those are very slow because of multiple layers redraw and also tend to bloat the code. A clipPath applied on a closed curve or a polygon can be easily replaced by a single curve with a simple boolean operation.

In my tests with Inkscape I've found that an svg file with 5-6 layers of complex closed curves + clipPaths exported from Adobe Illustrator can be flattened with boolean operations and resulting in a single merged element made of closed paths with no loss of quality. Masks can be also transformed in flat shapes using alpha colors and bezier curves.

The result is identical to the original svg image, only flattened and with reduced overdraw.

Mar 10 '17 22:03 Emasoft

Path merging and computation is a complex topic. Can you suggest an effective algorithm (i.e. better then O(n²))?

Mar 11 '17 08:03 GreLI

I have this problem as well when trying to optimize an SVG that has the world map in vector format, and only part of it is shown by masking... Any solutions for optimizing such SVG with Sketch or Illustrator (or other but those I mainly use)?

Update: Used this solutions before using this svg optimizer...got 1.6mb down to 770kt =§

Jun 16 '17 06:06 ux-engineer

Any update on this?

Mar 30 '18 04:03 luongvo

No update and unlikely there will be in the near future. I have no idea how to do this effectively. It's better to do such thinks in an image editor.

Mar 30 '18 17:03 GreLI

How about this: https://gist.github.com/timo22345/9413158 ?

Oct 10 '19 18:10 AdrianEddy

Seems like it's just converting to shapes and applying transformations. Nothing to do with clip-paths.

Oct 12 '19 11:10 GreLI

https://github.com/w8r/martinez/ is a very good tool to compute intersections between polygons. Might be a good approach.

Mar 29 '20 00:03 jmtrivial

This would be a very nice feature. I work frequently with SVGs converted from other formats like DWG and these files also contain a lot of layers and invisible (clipped) paths. Removing/optimizing them would greatly reduce the file size.