How to keep only the visible parts of the every object/path of a SVG image? Like “flatten” all the SVG

I’ve an SVG image with many objects, ones over anothers. What I need is a final SVG, with the same visual result, but in a way that I could change the opacity of any object without revealing the hidden parts of the other objects, revealing just the “hole” behind.

I’ve done this diagram to illustrate my question:
Diagram example image

I’ve done the example above by hand with Inkscape, selecting every square and duplicating it as many times as the number of differences (ctrl + -) I’ve need to apply to “cut” the underlying objects. This method is very hard to apply with a larger amount of objects.

Any software (Adobe Illustrator, command line tool…) or method that solves this problem will be welcome.


On Illustrator:

If there’s no transparency…

…select the shapes, then use the 'Trim' button in the Pathfinder window.

enter image description here

Trim can act strangely with objects that have transparency, so…

If there is transparency…

…select the squares, then Object > Flatten Transparency, set ‘vectors’ to 100%.

Image illustrating it from this other question:

enter image description here

Sometimes, Flatten Transparency leaves the bottom object uncut, sitting under everything else. If this happens, then since after Flatten Transparency all your vector shapes have opacity 100%, you can just select that bottom shape and the shapes that overlap it and use Trim as above.

Then save as SVG, if you need SVG. To avoid the coincident edges problem Ilmari Karonen describes, you could use Object > Transform > Transform Each to scale each object to say 100.5% around its own centre. Or, you could give each object a very thin stroke of its own fill colour (probably a better approach since ideally the tiny bit of overlap should be the same for everything, not proportional to size).

Source : Link , Question Author : Ignacio Lago , Answer Author : Community

Leave a Comment