: How to animate vector art designed in Inkscape? I want to create an animation this way: let's say, I create a circle with multiple nodes in Inkscape, maybe save it as .svg, then edit it,

@Miguel516

I don't know of such software, but there is an approach, which might help you to do the job partly in Inkscape.

You draw an path, copy it, modify the copy.

1) Now you put them apart, let's say for 5 frames in total, you leave about 3 times the width empty.

Then you select both, in the menu you select: extensions/from path/interpolate (might slightly differ, I translate from german settings) and choose 3 steps without duplication.

2) Then Inkscape will generate the transformations.



Sometimes it will be what you wanted, sometimes it might end pretty unexpected, since the form is not transformed in the way, you would expect it from a viewpoint, but from the construction point, which means, that the constructions points move toward their destination. Then it might be tricky to achieve, what you planned for.

3) The small circles are just to indicate, where the keypoints of construction of the initial circle and the ones of the rectangle to finish with are. They were not part of the transformation. Therefore the circle gets shrinked and rotated, then blown up again. Most probably unexpected, in the beginning.

So we turn the circle (4) that the construction points aren't in the top/bottom middle and left/right, but on the 45° axis. Still not perfect, but better. The orientation of first, second, ... node is significant. Symmetry is not considered.

5) So we turn the rectangle by 90°, so that the node numbering matches, and now we get, what we wanted.

Ok, now for the animation. To get 5 different pictures, for example back to the face, you first have to ungroup the 3 new faces in the middle. Then mark all 5 objects. Select from the file menu export/selection/batch export 5 images and confirm. They get generic numbers. But the two original faces have lower numbers than the 3 calculated ones, so for that reason, I guess, there is the option to duplicate the original images, but then you have to move them away to not overlap the original.

Now you have 5 images and can create an animated gif, for example, from them with an external tool like convert, from ImageMagick. That's more convenient if they are numbered in the right order.

convert -loop 3
-delay 200 f-100.png
-delay 20 f-101.png
-delay 20 f-102.png
-delay 20 f-103.png
-delay 20 f-104.png
-delay 200 f-105.png
face.gif


For larger numbers, this can be further automated with a script, of course.

Vote Up Vote Down