I'm looking for information on animating some of the SVG files I've made with inkscape.
When I try a google search, the results I get back are primarily focused on animating them with CSS, which means animating them within a web page. I don't think that's what I actually want.
I am using inkscape to create art assets for a video game. And while I was setting up some assets that were going to be for animated objects, it occurs to me that there might be some program that could automatically interpolate between these frames. Most of these frames I am creating are using the same nodes within the svg, just re-arranged. It would be extremely helpful if I could animate those changes to create my in-betweens. If I could pick a point between two frames and render out the result of that, or even just save that result as a new svg.
But I don't know where to begin to find such a solution; I don't know what to look for. Are there features within inkscape I can use? Is there a program that works well with inkscape so I don't have to start from scratch? Or failing that, really just any program where I can create an interpolation between some frames, even if I have to do some of my work over again.
I think you need procedural animation.Your best bets could be Synfig or Blender. Another option for games is DragonBones https://dragonbones.github.io/en/download.html This project is probably dying; some pages aren't updated and the last version has a sign in module. There's somewhere the 4.95 without, but you need to search- I suppose you are using spritesheets?
Roberto has already tried several programs, you can read that in the other topic. But I would like to know: are you using Windows? Or perhaps Linux? Because there are different options for the different systems.
Thanks you for the link; I'll start searching through that. At first glance Cavalry looks promising; I'll start using it to see if it will do what I need. EDIT: Cavalry mostly does what I need, but I'm having trouble with importing svg's. So I'm still open to other options.
Procedural animation doesn't sound like what I'm looking for, but maybe I'm wrong on the terms. Blender is a 3D animation package; I'm just using 2D vectors. And I'm using Windows.
Just to be a little more clear about what I'm looking for... https://i.imgur.com/Js7hDja.png Here is a detail of one thing I'm animating, it's a map for a beach area and I'm animating the waves on the shore. I made these frames in inkscape. The second one is just the first one moved around a bit; I didn't just move the whole objects but I also moved the nodes around a bit to re-size certain shapes, bend a few curves, etc, so that the sea foam can have a little bit of waggle to it. These are just two frames (one section of two frames) from a larger looping five-frame animation. But just at five frames its really choppy, so the next step is to create frames in-between these frames to smooth it out. But getting all those shapes within the sea-foam to properly line up is going to be hard and time-consuming, and I'm bound to get some details off or exaggerated wrong which is just going to look. And the more waggle I add to the sea foam, the harder it is going to be to get it look right. So either I don't have the sea foam waggle which makes it look static and boring, or I spend WAY too long fine-tuning each and every frame. But I'm thinking: this was made with vectors, so these frames could be mathematically interpolated. Halfway between point A and point B can just be determined by a program. I'd like to copy my vectors to another program, and set up the next key-frame where I want it, making all the changes and little details that I want, and have the program automatically interpolate where all the nodes need to be at halfway between the frames, or a quarter between, etc. Or better yet if I could import all my finished frames so I don't have to completely re-do the animation.
I'm sure I could get a web page to animate this, since it is an svg, but the problem there is that I can't easily export an image of these in-between frames. I'd need a program that can export the image as a png or svg, which the web-focused tools can't do.
Hi Marscaleb, Well, we all would like to import svg files easily into different programs. Truth is, there are not many options that work without problems.
The very new Enve imports Inkscape svg files. It was designed for animating svg files. You could look at the other topic for more information and also to share your findings there. It can help us all. 🎬 But as it is very new software, there is not much information about how it works.
If you want to make more animation in the future, you could also try OpenToonz. But then you'd better make the vector drawings directly in that program. There are more tutorials available about the program on Youtube. It has a problem with exporting sometimes, but there is a workaround for that.
I can't help with your interpolation idea however.. I can import Inkscape SVG on Cavalry. The only problem is: it treats SVG as a single object. So if you have different layers or objects, the best way, at least for now as I think they are going to change it, is to export every moving part as a single SVG and then import them on Cavalry and remake the scene.
Enve is opening SVG as layered drawings. Have you tried it? If moving nodes is your only need for animation, I think it could suit your workflow much better. Although Cavalry can indeed export multiple SVG of the animation, so if you plan it wisely you could eventually reach for the interpolations you needed.
You can use the Inkscape XML editor to add animate tags if you want,
HOWEVER
If you are using this for making game art chances are this will not work unless rendered in a browser.
Case in point,
I make generative art using Crystal and Celestine (makes SVG images for the web) and most of my art does not work in Inkscape due to animation tags, masking, or using the "use" tag. An example -> http://www.sol.vin/art/live/mineshift/ These SVGs are flat files, it is not rendered via javascript at all, they are pure SVG. If opened in Firefox and Chrome, they work perfectly every time. Open them with Ubuntu's image viewer of choice and you'll see nothing but a blank colored rectangle. Animation elements will not work unless they are rendered by the right render that respects the standard, and if you mess around with SVG source long enough you'll find out nothing seems to respect the standard properly.
Beyond the Basics Animating SVG files?
Inkscape.org
I'm looking for information on animating some of the SVG files I've made with inkscape.
When I try a google search, the results I get back are primarily focused on animating them with CSS, which means animating them within a web page.
I don't think that's what I actually want.
I am using inkscape to create art assets for a video game. And while I was setting up some assets that were going to be for animated objects, it occurs to me that there might be some program that could automatically interpolate between these frames. Most of these frames I am creating are using the same nodes within the svg, just re-arranged. It would be extremely helpful if I could animate those changes to create my in-betweens. If I could pick a point between two frames and render out the result of that, or even just save that result as a new svg.
But I don't know where to begin to find such a solution; I don't know what to look for. Are there features within inkscape I can use? Is there a program that works well with inkscape so I don't have to start from scratch? Or failing that, really just any program where I can create an interpolation between some frames, even if I have to do some of my work over again.
Anyone have any ideas here?
Are you looking for a free software? We were talking about it here https://inkscape.org/forums/other/svg-animation-like-kdenlive-opentoonz-etc/
I think you need procedural animation.Your best bets could be Synfig or Blender. Another option for games is DragonBones https://dragonbones.github.io/en/download.html This project is probably dying; some pages aren't updated and the last version has a sign in module. There's somewhere the 4.95 without, but you need to search- I suppose you are using spritesheets?
Hi Marscaleb,
Roberto has already tried several programs, you can read that in the other topic.
But I would like to know: are you using Windows? Or perhaps Linux?
Because there are different options for the different systems.
Thanks you for the link; I'll start searching through that. At first glance Cavalry looks promising; I'll start using it to see if it will do what I need.
EDIT: Cavalry mostly does what I need, but I'm having trouble with importing svg's. So I'm still open to other options.
Procedural animation doesn't sound like what I'm looking for, but maybe I'm wrong on the terms. Blender is a 3D animation package; I'm just using 2D vectors.
And I'm using Windows.
Just to be a little more clear about what I'm looking for...
https://i.imgur.com/Js7hDja.png
Here is a detail of one thing I'm animating, it's a map for a beach area and I'm animating the waves on the shore. I made these frames in inkscape. The second one is just the first one moved around a bit; I didn't just move the whole objects but I also moved the nodes around a bit to re-size certain shapes, bend a few curves, etc, so that the sea foam can have a little bit of waggle to it. These are just two frames (one section of two frames) from a larger looping five-frame animation. But just at five frames its really choppy, so the next step is to create frames in-between these frames to smooth it out.
But getting all those shapes within the sea-foam to properly line up is going to be hard and time-consuming, and I'm bound to get some details off or exaggerated wrong which is just going to look. And the more waggle I add to the sea foam, the harder it is going to be to get it look right. So either I don't have the sea foam waggle which makes it look static and boring, or I spend WAY too long fine-tuning each and every frame.
But I'm thinking: this was made with vectors, so these frames could be mathematically interpolated. Halfway between point A and point B can just be determined by a program.
I'd like to copy my vectors to another program, and set up the next key-frame where I want it, making all the changes and little details that I want, and have the program automatically interpolate where all the nodes need to be at halfway between the frames, or a quarter between, etc.
Or better yet if I could import all my finished frames so I don't have to completely re-do the animation.
I'm sure I could get a web page to animate this, since it is an svg, but the problem there is that I can't easily export an image of these in-between frames. I'd need a program that can export the image as a png or svg, which the web-focused tools can't do.
Hi Marscaleb,
Well, we all would like to import svg files easily into different programs. Truth is, there are not many options that work without problems.
The very new Enve imports Inkscape svg files. It was designed for animating svg files.
You could look at the other topic for more information and also to share your findings there. It can help us all. 🎬
But as it is very new software, there is not much information about how it works.
If you want to make more animation in the future, you could also try OpenToonz. But then you'd better make the vector drawings directly in that program.
There are more tutorials available about the program on Youtube.
It has a problem with exporting sometimes, but there is a workaround for that.
I can't help with your interpolation idea however.. I can import Inkscape SVG on Cavalry. The only problem is: it treats SVG as a single object. So if you have different layers or objects, the best way, at least for now as I think they are going to change it, is to export every moving part as a single SVG and then import them on Cavalry and remake the scene.
Enve is opening SVG as layered drawings. Have you tried it? If moving nodes is your only need for animation, I think it could suit your workflow much better. Although Cavalry can indeed export multiple SVG of the animation, so if you plan it wisely you could eventually reach for the interpolations you needed.
Hi!
Animating SVG via editing the source is not that hard, depending on what you do.
Generally you can do "frame by frame" animations by grouping each frame up, then using the keyTimes attribute to time when that frame shows up using the animate tag with opacity. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keyTimes
You can also animate basic motion via paths very easily. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion
You can use the Inkscape XML editor to add animate tags if you want,
HOWEVER
If you are using this for making game art chances are this will not work unless rendered in a browser.
Case in point,
I make generative art using Crystal and Celestine (makes SVG images for the web) and most of my art does not work in Inkscape due to animation tags, masking, or using the "use" tag. An example -> http://www.sol.vin/art/live/mineshift/ These SVGs are flat files, it is not rendered via javascript at all, they are pure SVG. If opened in Firefox and Chrome, they work perfectly every time. Open them with Ubuntu's image viewer of choice and you'll see nothing but a blank colored rectangle. Animation elements will not work unless they are rendered by the right render that respects the standard, and if you mess around with SVG source long enough you'll find out nothing seems to respect the standard properly.