Question: I have an SVG image with many objects, stacked. 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 underlying objects, revealing just the "hole" behind.

I've done [this diagram](http://cl.ly/image/1G0k2f1w2k11) to illustrate the request:
![Diagram example image](https://i.stack.imgur.com/UYmDg.png)

This example above was done by hand with Inkscape, selecting every square and duplicating it as many times as the number of differences (`ctrl` + `-`) I needed to "cut" the underlying objects. This method is very hard to apply with a large amount of objects.

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

Answer: 
On Illustrator:

**If there's no transparency...**
---------------------------------

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

![enter image description here](https://i.stack.imgur.com/ZJNDu.png)

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](https://graphicdesign.stackexchange.com/questions/6631/how-to-sample-actual-color-of-an-area-in-illustrator):

![enter image description here](https://i.stack.imgur.com/QPx9e.gif)

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).
A problem with trying to do what you ask for in the first place is that your shapes will end up with coincident edges. When rendered, such edges will often appear as if there was a narrow gap between the shapes, allowing the background to shine through a little.

There are two reasons why this happens — anti-aliasing and roundoff:

* First, most SVG renderers use an anti-aliasing implementation in which pixels along a shape's edge are drawn as partially transparent, with the amount of transparency determined by how much of each pixel the shape overlaps. This typically produces excellent results, but it's not perfect, and one situation that can expose its inaccuracies is when the edges of two shapes happen to coincide exactly.

To see why this happens, imagine a pixel of which one half is covered by, say, a red shape, and exactly the opposite half is covered by a green shape, with both of these shapes being drawn on a blue background. With a "perfect" renderer, this pixel would be 50% red and 50% green, with no blue showing through. However, what happens with a *real* renderer is that it first draws, say, the red shape, making the pixel 50% red and 50% blue. Then the green shape is drawn on top of that background, causing half of its original color mix to be replaced with green, leaving the pixel 25% red, 50% green and 25% blue.
* The other reason why coincident edges can be problematic is that renderers typically use floating point math, which is subject to small roundoff errors. Thus, even though the edges are *supposed* to coincide exactly, inaccuracies in calculating them might change their actual path a little, leaving a tiny gap. (This is a bigger issue with 3D rendering, where such numerical issues may leave the renderer uncertain about which of two coincident surfaces should be drawn in front of the other, but it can affect 2D rendering as well.)

In principle, the anti-aliasing issue could be avoided by initially rendering the whole image at a very high resolution (say, about 16 times higher than the target resolution in each direction) without anti-aliasing, and then scaling it down to smooth the edges. However, this would be a *very* expensive rendering method compared to standard anti-aliased SVG rendering, which is why it's not normally used. Also, it still wouldn't entirely solve issues with numerical accuracy.

Thus, the practical solution is to avoid coincident edges where possible. As long as you make sure that any adjacent shapes overlap sufficiently, the standard anti-aliasing algorithm will work fine and you won't see any apparent gaps between the shapes.