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?

There are probably a variety of solutions depending on the specific SVG you have made.  Please attach it.

In general, I just don't add lines that will later be covered by other objects in the same SVG. However this may be difficult depending on how you build your SVGs. For example if the back end of a car is going to be behind a shed. I draw the shed, and then I draw the front end of the car sticking out from behind the shed. The back end of the car is never drawn.  This is how it would probably be done in a "traditional" whiteboard video as well.

or you can draw the whole car, then use a seperate SVG of white stroked paths to cover part of the car ("erase it")
and then add the shed as a third SVG.

-Mike (videoscribe user)

 

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

Here is my best solution so far.  At least it is accurate and the amount of extra work is manageable. Create the SVG for the image which is to overlap in front.  Then edit that SVG under the same name plus _outline and change all lines and colours to white.  Save the result.  In VideoScribe import both images, _outline first, and always resize and reposition them with both selected. That way they stay exactly the same size and position.  Set the animation time of the _outline version to 0 so the space for the image is cleared cleanly (drawing is messy no matter how you do it), and then the image draws into the space that has been cleared.  You can overlap any part and amount of the image behind cleanly.  If you want a bit of clearance for clarity, set the pen width to more than the original and you'll have an amount of extra white around the overlapped image.