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:
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.
If there’s no transparency…
…select the shapes, then use the
'Trim' button in the
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:
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).