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

[Emasoft]

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.

[GreLI]

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

[ux-engineer]

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 =§

[luongvo]

Any update on this?

[GreLI]

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.

[AdrianEddy]

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

[GreLI]

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

[jmtrivial]

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

[cluick]

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.

[jmtrivial]

A work in progress implementation of such clipping: https://github.com/ACTIVmap/svg-to-stl

[jetrotal]

Any news on this?

[pwichmann]

Any news on this? This appears to be a useful functionality for SVGO.

[akre54]

For anyone stuck on this, check out this StackOverflow answer: https://stackoverflow.com/a/70278985

I'd love to see this incorporated into svgo - looks like a pretty straightforward use of paper.js's intersect function.

[aetinx]

Anything on this yet?

[akre54]

I wrote a gist that might help: https://gist.github.com/akre54/4d9ace17fb27d0507a6c790be5047e3d

[aetinx]

I wrote a gist that might help: https://gist.github.com/akre54/4d9ace17fb27d0507a6c790be5047e3d

@akre54 I've been looking for a tool to replace the use of masks and clipping paths in some SVG files by "flattening" them... would this be the thing to do it?

[akre54]

@aetinx it's been a while but that code should point you in the right direction. It uses paper.js and the intersect function to remove clipping paths and masks, just outputting a path that is the intersection with the clipping path.

[aetinx]

@aetinx it's been a while but that code should point you in the right direction. It uses paper.js and the intersect function to remove clipping paths and masks, just outputting a path that is the intersection with the clipping path.

@akre54 I sure hope someone with a bit more knowledge would be able to help make a proper tool for this down the line... or add it to SVGO.

Some of my pain points:

[aetinx]

Files in question: