Ilustrator sizing for Whiteboard Animation

Question

I have a problem and after days of searching the Net, I can't seem to find the answer. I'm hoping someone here can help.
I'm using illustrator cs6. Actually we just got it at work so I'm rather new at using it.
One of the things we use illustrator for is to help us manipulate images for whiteboard animation. There is a technique that requires you to first prepare the images in illustrator but there is a sizing issue I can't figure out.
I don't want to bore you with all the whiteboard  stuff but let me give you enough info hoping it will help solve the illustrator problem
It is important to know that we use THE SAME image several times for the effect. The image will be a raster image.
FIRST INSTANCE
1. We import (place) the FIRST INSTANCE OF THE SAME IMAGE into illustrator.
2. Using the pencil tool (we can not use any other tool) we stroke certain areas of the IMAGE to be drawn in the whiteboard and DO NOT stroke the areas we don't want to be drawn.
3. When done stroking, the IMAGE is saved as a SVG.
SECOND INSTANCE
1. We open a new document and place the same raster image we used in the FIRST INSTANCE into illustrator.
2. Using the pencil tool, we stroke different areas of the image to be drawn in the whiteboard
3. When done stroking we save the image as a SVG.
So in the above example we used the same RASTER image but each image was stroked in different areas using the pencil tool. We saved the images as SVG. Lets say we named the images  1.svg and 2.svg. Remember they are the same image, the only difference is they were stroked differently with the pencil tool.
First I import 1.svg into the whiteboard and next I import 2.svg exactly on top of 1.svg.  When the whiteboard draws the images it will first draw the strokes of 1.svg and than it will draw the strokes of 2.svg.
HERE IS THE PROBLEM.
When creating the FIRST INSTANCE ABOVE and adding strokes, some of the strokes go outside of the border of the image. Hence when I save it, the image size may be larger than the original image because of the strokes going outside of the image border. The same thing may happen when I stroke the SECOND INSTANCE of the image.
I need to find a way in illustrator CS6 to remove all strokes outside of the image border so when I save the images they are the same size. If they are not the same size, when I import them into the whiteboard software, the drawing effect shifts while it should look like one image being drawn. The two SVG images have to be the same size for the drawing effect to work.
WOW!!!!!!!!!! I didn't know it would take all that to explain my problem and I'm still not sure if I explained it well. I'll keep my fingers crossed that someone can decipher the above enough to help me out. It's appreciated.
Thanks

Answer 1

city,
You may, after making the strokes on top of the image, the Layers palette with the expanded layer being your friend, you can select objects covered by other objects there, as in 2):
1) Select the image, then Ctrl/Cmd+C+F+X+F (hold Ctrl/Cmd and press the other keys in succession), to bring a copy of the image to the very top, then Colors>Adjust Colors, and change to black (depending on your version you may find it in the Filter or the Effect dropdown);
2) Lock the original image;
3) Select the copy image and the strokes and in the Transparency palette flyout click Make Opacity Mask with Clip and Invert Mask ticked, this will hide any part of the strokes outside the image boundaries and let the original image be visible underneath;
4) Unlock the original image.
This should (visually) cut the outlying parts of the strokes and ensure that the SVGs have the same size.