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

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 to illustrate the request:

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 1

On Illustrator:

If there's no transparency...

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

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:

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).

Answer 2

I have an idea, though i'm sure there is a better way.

Using Inkscape

1. Place your objects and make sure to set each object's color where none of the same color are touching, (use as few as colors as possible) you will change these later.
2. Edit -> Preferences near the bottom of the selection, select Bitmaps set Resolution (256) and close.
3. select all your objects, then Edit -> Make a Bitmap copy (it will take a bit of time generating the image).
4. Path -> Trace Bitmap in the Mode tap set Multiple scan: Scans (6, one for each color used plus one for background), Colors (on) mark only Remove background.
5. In the Options tab un-mark everything! Submit OK.
6. Right click on group, select Ungroup.
7. Now select all your Objects, and Path -> Break Apart.
8. And now you can change your colors to look pretty!

You may need to delete some stray lines.

Be sure to set the Resolution back!. And let me know if it works for you.

Answer 3

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.