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?


enter image description here

2 Answers 2

  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.

enter image description here

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?

enter image description here

  • Great, I ended up just drawing it by hand, but this is much better for future png>svg conversions. I really appreciate the screenshots.
    – Dan Oswalt
    Nov 21, 2017 at 17:10

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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