This topic started in another thread. I was tinkering with OpenToonz and KdenLive. These are video editors.
It would be great if you can easily import an svg file made in Inkscape into video software. And then animate it.

My findings with OpenToonz are these:
- The fastest way is to make my svg file into a high resolution png and then animate it with the plastic tool.
  Importing and exporting svg files does mess up the drawing.
- Direct rendering with the plastic tool often gives an error. The workaround is to use a list of rendering tasks using the farm.
  If anyone is interested in these instructions, just say so.
 

And I have a question. Does anyone use svg with synfig? What is your experience with it?

Hey Kirstie! Looks like you are looking for animating SVG. Both OpenToonz and Synfig were a letdown for me. My recent findings is Cavalry not open source and you need to sign up but can import SVG files from Inkscape and I'm pleased so far. The second is Enve, open source; didn't tried, but looks promising!

Hi Roberto,

Yes, that's right. I was looking at animation & svg.

Thank you for your tips! As a result I have looked into Cavalry, which is not a video editor?
It looks promising, although there is very little written documentation.
First you have to watch a lot of youtube video's, before you know anything.

• Could you tell a little bit about it?
• And do you know which type of output files it creates? gif or html or mp4 or svg?

Enve sounds very promising indeed, as the maker uses both Blender and Inkscape. I will dive into that program later today.

Cavalry outputs .gif, multiple .png and multiple .svg. The reason I mentioned it, is because you talked more about animation softwares ( OpenToonz, Synfig ) than video editing ( KDEnlive ). There are differences between the two tasks. In animation you can import objects and move them separetely, like you do with objects in Inkscape. Video editing is more geared toward merging clips or pictures together, adding transitions, text and color grading, sound and movie formats. So depending on the task you want to accomplish you might need one or both of them. Blender does support SVG and animation. My recent searches bringed me to try a lot of different ( free ) softwares about animation and video editing ( on Windows ). There is a lack of free animation tools, however there are plenty for video editing. I didn't mentioned it before but I'm also not keen on KDEnlive. Cavalry was the only free option which I was able to integrate to my workflow with Inkscape. I then use Express for quick video montages. Other options for video editing are Shotcut, Olive and OpenShot; if I remember properly OpenShot was updated with better SVG support. Another software is DaVinci. I'm in love with it and I'm probably going to buy it!

Hi Roberto,

Thank you very much for the answers. While I do like making animation, I am a beginner and want to explore the options.
So thanks for doing some of the ground work!

Yes, I have noticed the differences between animation programs and video editing. Often you need different programs for different tasks.
Sometimes it is possible to make some kind of animation in video editors. But these animations are very limited.
I'll therefore no longer talk about the video editors in this topic then. 😊
-------

Because I know my way around in Inkscape, I would like to use it in my workflow.
And with that comes the question, how to use a design, which workflow is the easiest.
It would be fantastic if making small (or big) animations is possible by directly using Inkscape svg's.
I do like OpenToonz, but these vector files are not very compatible with Inkscape yet. So you cannot switch between the 2 programs.
Exporting as png and then animate it in OpenToonz, it worked. But it was not the real svg file.

Let me see if I understand this correctly.

• Cavalry can open and animate svg files?
• It has good options for smaller video's then, like a gif.
• And do you work online while using the program?
• If you want to make something a bit longer than a gif, you still have to render all the png's into a movie in a different program?

You have tried a lot of these open source and free animation tools, I notice.
Maybe I can also look into Blender again. I found that program hard to learn, because of the many possibilities.
As it is open source and stable, it is very trustworthy.

Commercial/ new software, you do not always know if it will still be there next year.
For small video's that is no problem. But for something you want to keep and maybe edit later again, it is important.

Worry not, I'm also a beginner, but very interested in the subject. Should we turn this topic into our learning journey?

Cavarly can export SVG for Inkscape and import SVG files made with Inkscape. Since it's still in development I think filters like gaussian blur aren't supported, but I will try later and tell more! As for trusting them, I think they are a big group; they already said it is going to be a commercial software, although we don't know if they will keep a free version.

My workflow is: export all the parts made in Inkscape in separate documents and import them on Cavalry. Assign a layer to every shape and start working. I then try to render the .gif. If the result isn't perfect I export all the .png in a folder and import all of them as image sequence on Express for making the .mp4. Call it crazy but that was the easiest I found without paying.

The software need to renew the license every 24h, however once you sign up you can work without internet, and even turn off the computer.

As for Blender, I'm also looking into it again. Some softwares have many options available; however there's a difference between I can do this and I'm doing this. Sometimes they are too contort to work with, so the user experience is lacking; fortunately there is a growing trend of custom menus for simple tasks and give beginners some air. If I don't need it why keep it there?

RM.

Worry not, I'm also a beginner, but very interested in the subject. Should we turn this topic into our learning journey?

That seems like a very good idea! Thanks for explaining your workflow with Cavalry & Express. If you want to, you can post links to your art here too.

I have looked at the Youtube videos of Enve. That was very interesting, although the explanation went waaay too fast for me. You can however export immediately to different video formats.
It is a one-person's-project at the moment. If more people embrace it by helping developing the software, it is the way to go with svg files. I am no developer at all, so cannot be of help in that direction.
 

Let me know if you try Enve. I can't until there isn't a ready version for Windows; he said on Twitter a first version was released on GitHub but I have no interest on fiddling with libraries and compiling; the last time I did it for another software it became a nightmare with unsupported or updated staff --

I will post examples of Cavalry this week ✌

Hi RM,

There is an Enve build for Windows. I installed it and it did correctly import my Inkscape svg. But the developer doesn't give any guarantees for Windows.. You could give it a try though. It could be the most direct approach. I am still figuring out how to do some basic animation with it.

https://github.com/MaurycyLiebner/enve/releases/continuous-windows/

How I missed that?? I understood there was a Windows build but it had to be compiled or something like that. I even checked the github page to be sure! 😅

*installing right now*

*woah it opens!*

*drawing weird lines*

How to add keyframes? I will test as soon as I can and make some comparison with Cavalry.

So! I've spent some time with Enve. There wasn't much actually.. but almost everything went smoothly without the need of tutorials. It crashed when importing a wav so I couldn't test it with sound; it has a lot of options for exporting movies in mp4 wheter Cavalry has prores. The good thing is that imports SVG as layered, contrary to Cavalry that treats them as a single object, at least for now. I tried to import a blurred path, however none of them seemed to support it even if Cavalry has indeed blur/drop shadow and motion blur? That is strange. Anyway. I think Cavalry is more advanced; it's already one of my fav and I'll keep on using it until the price skyrockets like....Sequoia! 😅

Hi,
Imppao made a short video about animating an svg in Blender. It is really interesting.
https://inkscape.org/forums/tutorials/tuto-inkscape-blender-import-inkscape-illustration-in-blender-and-animate-it/?c=13594#c13594

That was a fast tutorial!

Some news.

Cavalry is still free yet, news are it's going soon at 20$/month. Last version is PR14. [sadface]

Enve last updates: Colorizing, transitions and objects alignment.

Hi Roberto,
Yes, Imppao's tutorial is very fast.
Whispering: But... it is possible to slow it down, fortunately!

I'm also interested in a simple workflow for creating short clips with SVG images. Have been looking at creating simple animation that mostly is just 7-10 keyframes (pictures) in sequence as a Video/Gif not longer than 60sec.

@Kirstie - Love the designs you've been making! 🤩

@Roberto Mocci - Wow you've tested quite a heap of software. 😎

I've settled on OpenShot for it's simple UI. And if you overlay text you can edit it in Inkscape first. The downside is that I can't move any of the elements in my SVG about unless I export each element individually as png and composite it again in Openshot. And I don't intend to do everything in duplicate. Openshot seems to support small transitions which could make things visually more interesting without much fuss.

I've toyed with KDENLIVE, Synfig (way too complex for what I'm trying to do) and Tupee (simpler interface but the frame by frame thing get's me). Hitting copy frame 24x for each slide is quite silly in my use case. Neither of these seem to want to edit imported SVG natively. So for importing SVG I may as well import into Openshot.

Coming from a Webdevelopment background it's possible do simple animation with CSS/JS. But it's often too time intensive for a quick project. And this is evident by how uncomplicated most SVG animation of this kind is if you look around the web. Exporting to video/gif is also not possible.

I'm intrigued by Blender. It's the most robust of all the Open Source animation/video tools I'm aware of. It's so brilliant at many different things that it's rather hard to figure out how to go about doing what you need to. I modeled some 3D figures in Blender as a learning experience and setup lighting some time ago. But I've never quite figured out it's animation flow. I think Blender like Inkscape is used for different purposes which makes documenting & learning it quite a challenge.

I think Enve has an easy enough workflow with quite a lot of possibilities. I'll compile it soon let you know how it goes. Thanks for discovering that little gem Roberto!

BTW: How do you guys organize your SVG assets? I've created a tread for that here: https://inkscape.org/forums/cafe/how-do-you-organize-your-svgs/
 

I would like to mention that also Natron plays nicely with SVG file!

A deserved update:

Cavalry is now at version one! This means.. new licenses: free, the render is watermarked; and premium: monthly subscription.

*I cringe everytime i see a software with a subscription; it's clear they want to compete with Adobe.. sad story.*

Enve is on hiatus: the developer announced on twitter he's having health issues. Let's pray for him! The patreon page is suspended, however enve can still be downloaded from github.

@Gnuserland Can you link to some tutorial / lesson regarding Natron and svg?

@Creativ Yes; I'm always doing searches on the web and testing software ang games is..so much fun! I'm getting back into blender; the last updates for the pencil are very interesting.

Ciao Roberto...

The one I remember I couldn't find it, but this series is pretty neat to follow for beginners: https://www.youtube.com/playlist?list=PLqazFFzUAPc7c67ZuC629CBVL-26e_5QE

Official docs: https://natron.readthedocs.io/en/rb-2.3/guide/tutorials-svgworkflow.html

We forgot to mention Synfig: https://www.synfig.org/

Which works natively with SVG objects...

Ciao @Gnuserland and sorry for the late reply. Thanks a lot for the links; bookmarked. I'll check them out with the phone when I have slow days.

It was @Kirstie that actually first mentioned Synfig at comment #2 ;)

I noticed there is another service for animations called Rive; however is web-based and you need to sign-up. Still, worth it https://rive.app/

Hello. Joining the discussion a bit late.

I quite like SynfigStudio for more complex animations. There's an Inkscape plugin to export to Synfig format (better than importing the SVG in Synfig from my experience so far) and animating it is then quite accessible. Export formats are all there.

For simple animations I quite like SVG.js, scripting the animation directly in Inkscape. It displays nicely in most recent browsers and is done in a few minutes: https://inkscape.org/forums/tutorials/easy-animation-of-your-svg-in-inkscape-with-svgjs/

Hello Berteh, 

Just wondered if you aware of any pure svg tricks to capture a single frame of an svg animation:

for example, if I have:

   <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <circle
       style="fill:#ffcc00;stroke:#ff0000;stroke-width:0.25;-inkscape-stroke:none;stop-color:#000000"
       id="path1583"
       cx="0"
       cy="0"
       r="1.7737223" />
    <animateMotion
        dur="20s"
        path="m 6.3415475,4.5654679 c 0.7926131,1.4048875 1.7256556,1.1307368 .......................................................... etc"
       repeatCount="indefinite"
       rotate="auto" />
  </g>

( path has been truncated to fit on the forum page )

I want to be able to display the svg at time 'n' seconds. To do this I wondered if there was someway to convert the svg at that time to an absolute svg with coordinates for the circle being moved along the path ? 

Hi Inklinea,

There's the SVG.svg() function meant to export the SVG to a string that you can then write to another document. documented at https://svgjs.dev/docs/3.0/importing-exporting/

Just need to trigger it at the right time, using delay, loop interval or other means you can think of.

But in your case the SVG does not change dynamically at each frame, so I doubt this will result in a static SVG frame any different from the original code... Another option would be to render the target frame to a static image format, PNG or other, using something like https://github.com/exupero/saveSvgAsPng

Thanks for your reply.

Ahh, it seems that the web browsers has

Window.requestAnimationFrame() 

To achieve that - I don't think it's that easy in python.

Hi inklinea.

For a python-based rasterization maybe have a look at Cairo or librsvg? I don't know how well they support animations though. https://stackoverflow.com/questions/6589358/convert-svg-to-png-in-python

Hi animators,

I goofed around with enve and made an inkscape + enve tutorial out it several months ago.  It's at

https://roy-torley.github.io/Inkscape_Tutorial/Tutorial19/Tutorial19.html

It's just dabbling and might also be worth a chuckle.  This is my two guilders worth.  Best wishes to all, Roy