Animation from svg frames

Discuss SVG code, accessible via the XML Editor.
sorbue
Posts: 1
Joined: Tue Oct 25, 2011 11:46 pm

Animation from svg frames

Postby sorbue » Wed Oct 26, 2011 12:58 am

Hello,

I have several svg image files and i would like to create an animation in which each svg image file is displayed once (as a gif animated does form bitmap file).

Does anybody has an idea for this ?

Thanks !

User avatar
BobSongs
Posts: 324
Joined: Fri Sep 14, 2007 2:18 pm
Location: Montreal, Canada

Re: Animation from svg frames

Postby BobSongs » Wed Oct 26, 2011 3:36 am

Hi sorbue, and welcome to the forum.

I believe there are a few links to some animation in the forums. From what I recall, the idea was to create several "frames" using a duplicate of the SVG with small alterations. Then each "frame" is exported. GIMP with GAP are used to compile the images in the right order for the right length of time and exported to a GIF file.

I don't have the link, but a search in the forums should lead you to it. If you can't locate it, I'll pull it from my other PC's bookmarks.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Animation from svg frames

Postby brynn » Thu Oct 27, 2011 2:34 pm

To my understanding, there's only one program which will accept SVG files, and able to create animation with them. Or maybe it's the only free program which will do it? But I'm not sure if it's quite ready for general use. It's called Synfig (http://www.synfig.org)

I think the best way is to save each SVG image as a "frame" as it sounds like you've done. Then you can use GIMP (http://www.gimp.org/) or some other program to assemble the frames. I attempted to make an animation using Inkscape and GIMP, and it would have worked great, except for my lack of really good drawing skills. I should try it again though, because I've learned a lot more since then, lol. What I can't remember at the moment, is if I exported each SVG to PNG (using File menu > Export Bitmap), and then used GIMP's File menu > Open as layers command, or if GIMP was opening SVGs directly. But either way, in GIMP, you put each "frame" into a separate layer, and save as GIF. When you save as GIF, you get a dialog with which you can set the time sequence of each frame/layer. I'm not sure how other animation programs work.

But if you try Synfig, I'd be interested to hear how it goes. When I looked into it a couple of years ago, it didn't sound quite ready for someone with my limited skills. But 2 years is a long time, and it may well be much more sophisticated by now?

PS - I've read about the GIMP with GAP that Bob mentioned. But you can do simple animations with the basic program, no GAP. I think the GAP part gives you more options for the animation.

EDIT
Oops, I just noticed that you've posted this in the SVG/XML forum. Do you mean that you want to animate it using XML? I don't think that's possible quite yet, although I could be wrong. It might be possible with some sort of script, though, like javascript or something??? I'm not sure.

User avatar
LiquidAsh
Posts: 71
Joined: Fri Apr 22, 2011 11:35 pm
Contact:

Re: Animation from svg frames

Postby LiquidAsh » Mon Nov 07, 2011 1:34 am

I think this will depend on what you want to use the animation for. With more and more browsers being able to render svg, it seems like the javascript suggestion above would work well. You could collapse add all of your images as separate layers in a single svg. They use a little javascript to change which one is visible over time. Some of the raster animation formats might be more portable, if you have other plans for this animation.

chriswww
Posts: 383
Joined: Fri Nov 19, 2010 3:04 pm

Re: Animation from svg frames

Postby chriswww » Thu Nov 17, 2011 10:39 pm

haven't tried yet what's possible with it...but maybe you could try to use the Ample SDK javascript framework with jquery. with a bit of programming and a whole lot of luck for it to work smoothly, you just might be able to replace the entire svg document for each frame. that would seem to me the most direct way of using your svg frames.
a different direction and only suitable for some animation sequences would be to use SMIL, which is already part of the standard for doing animation in SVG. however that doesn't deal with frames per se, it's about changing things you can animate (there's only certain things you can do e.g. change positions, fades) for predefined periods of time, which you chain together. SMIL is somewhat supported in latest browsers and also somewhat supported in some of the javascript+svg frameworks like Ample, Raphael, or even svgweb...but svgweb uses flash for render.
you can also do some very basic kind of animation using html5 and css3 and some DOM direct manipulation, in browsers that support it.

i'm not sure if the tkzinc library still works in modern OS...it does have bindings for perl and C and tk of course. it's been gathering a lot of dust but still available for download. cool thing was that it rendered the svg in opengl. looked very slick...however was too ahead of it's time and is now forgotten, just like tk language mostly is forgotten...but really cool ;)


Return to “SVG / XML Code”