Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

share|improve this question
1  
I believe you are on the right track with Inkscape's path options. But consider some of the other options. "Divide" might be the more useful command. –  DA01 Nov 27 '12 at 4:39
    
Why do you want to do this? I've pointed out one reason why it may not be a good idea in my answer, but I'm curious about whether you have some specific reason you want to do this for, and whether there might be some other way to accomplish it. –  Ilmari Karonen Dec 15 '12 at 12:57
    
I'm using this SVG in an interactive viewer. For many reasons the only allowed property I can modify to show "hover" is opacity. But the object behind shouldn't be revealed by this interaction, then I need to use SVG's without those areas behind. –  Ignacio Lago Dec 20 '12 at 22:57
add comment

3 Answers

up vote 2 down vote accepted

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

share|improve this answer
    
I'll try this one too. This seems promising. I'm not very used to work with Illustrator. Thank you. –  Ignacio Lago Dec 20 '12 at 22:59
add comment

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.

share|improve this answer
    
It's a great and original idea. I'll try it and let you know if it fits. Thank you! :) –  Ignacio Lago Dec 20 '12 at 22:51
add comment

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.

share|improve this answer
    
I know that there are some drawbacks, but they're minor issues in comparation. Thank you for your elaborated explanation. –  Ignacio Lago Dec 20 '12 at 23:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.