I'm doing well creating SVG files in Illustrator, drawing lines, colouring, and then revealing the colours using transparent strokes - all described well in many helpful posts. However when images overlap the front image does not clear its space as it draws, the lines simply draw over the image behind it and it is quite unclear to watch. I would love to have a technique either to first clear the space for the front image, or for the outside line to clear the space within it as it draws, or fill with white after it draws, effectively clearing the space for the front image. The only way I've found is to create another svg of the same size and shape, clearing the space only, but that is terribly inefficient on time, approximate in size and position and useless for future image edits. Is there any technique in Illustrator that will allow me to achieve this within a single SVG?
In the attached example I would like to move the cows in closer so they are partially behind, but because it is a complex image and I'm not sure how I want them to overlap, the best solution would be if the cows SVG cleared their own space. I'm scribing the Christmas story, and there are lots of places I've had to work clumsily around clearing space, or kept images awkwardly apart because the space is too hard to clear cleanly. I know the techniques you've described, but they are very static (ie once you've decided the "overlap" you can't change it) and it only works on simple overlaps (eg the straight line example you gave of the shed).