Inkscape: after bitmap trace, break shapes into own paths (for css animation)

Question

I've got this very simple b&w svg that was created from a bitmap trace in inkscape (below is the png original, it doesn't allow svg uploads?). My end-goal is to have each black shape in the image as its own path or polygon that can be selected as an element in css and animated. (Including the eyes, which would be their own shapes filled with whatever color later).

After the bitmap trace I see that it's all one path though. I've seen solutions that suggest how to break up the path, but I'm not having success creating these individual objects.

This answer seemed like what I was looking for, but it didn't really work: Breaking polygons into paths in Inkscape

If my goal is css-selectable svg elements, would I be better off drawing it by hand?

Thanks

Answer 1

1. Trace the bitmap, delete the bitmap, and select the trace.

2. Path > Break Apart

3. Select one of the eye circles, and hold down Shift while you select the head. Both paths are now selected.

4. Path > Difference

5. Repeat steps 3 and 4 for the other eye.

Now all parts are separate paths. The eyes and head are combined as one.

Of course, if you want, you could leave the eye circles as separate paths instead of combining them with Difference. Simply fill them white perhaps?

Answer 2

Another approach is to create as many duplicates (Ctrl + D) as there are components. Ctrl+ D places copies exactly on top of each other, saving you the hassle of aligning.

Then, for each duplicate, use the select node tool to remove excess portions. For instance, delete all except the left wing in one selection, and all except the right wing in the other selection.