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
-
Trace the bitmap, delete the bitmap, and select the trace.
-
Path > Break Apart
-
Select one of the eye circles, and hold down Shift while you select the head. Both paths are now selected.
-
Path > Difference
-
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?
Attribution
Source : Link , Question Author : Dan Oswalt , Answer Author : Billy Kerr