Mobile app version of vmapp.org
Login or Join
Gretchen549

: Inkscape: after bitmap trace, break shapes into own paths (for css animation) I've got this very simple b&w svg that was created from a bitmap trace in inkscape (below is the png original,

@Gretchen549

Posted in: #Css #Inkscape #Svg

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

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Gretchen549

1 Comments

Sorted by latest first Latest Oldest Best

 

@Moriarity648

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?

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme