5

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

enter image description here

6
  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 '17 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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