Add multipage support to allow multiple frame svg animations

[EmanueleSabetta]

I said it in the multipage thread, but I think this deserves a more specific post: adding multiple pages support (SVG 1.2) would be an excellent way to helping doing SVG ANIMATIONS.

Currently SVG animations are made saving DIFFERENT SVG frames as individual .svg files, and then using animation libraries like Snap.SVG to play those as frames and creating/blending the in-between frames automatically.

You can see an example of this in this excellent tutorial:
http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/

It is very painful to make animations using many different svg files, because you cannot compare them in an onion-layering way, or going back and fourth between frames with arrows when editing them. If Inkscape would add multipage support, it would allow to create animations using the pages as frames. For example for 1 second of a button animation you have 30 frames.
Then you just need to add some "key" pages at a certain indexes (es. page/frame 0, 10, 20, 30...). Then export the multipage svg, and import it in your web project. Here Snap.svg would automatically "tween" and interpolate the key frames generating the missing frames by interpolating elements with the same id. This is way layers cannot be used: objects with the same id cannot be shared between different layers.

Adding multipage animation support in Inkscape would be cool. It is also very easy to add a "preview" option using Snap.svg.

[Liam P. White (liampwhite)]

> Currently SVG animations are made saving DIFFERENT SVG frames as individual .svg files, and then using animation libraries like Snap.SVG to play those as frames and creating/blending the in-between frames automatically.

No, that's not how SVG animations are made. SVG animations are made by hand-editing the SVG file to include <animate> nodes or using scripting languages to manipulate the DOM. It's possible to create a rendered result of these with a tool like SVGani. (for an example of animated SVG, see http://upload.wikimedia.org/wikipedia/commons/4/4f/Soccer_ball_animated.svg )

What you're referring to is known as keyframed animation, and easy enough (and even faster!) to do with multiple layers that change throughout an animation. Label them and toggle their visiblity per each export you make.

[EmanueleSabetta (fmuaddib)]

Did you read the article I linked? I use Snap.svg since january following the technique described there, and it works fine. You can check by yourself those icons made in Inkscape drawing 2 different SVG icons, the start and the destination one:

http://tympanus.net/Development/AnimatedSVGIcons/

Anyway, as you say the animations are made by hand-editing the svg file. What I suggest is exactly a way to avoid writing all animations in javascript, but just using a single general ready to use function based on Snap.svg for animate icons. The user or the web designer would have only to draw the frames as a multipage svg file and passing it to this function.

Layers are NOT adapt to animations, because layers cannot share objects with the same id. Any tweening algorithm needs to interpolate between the start and the destination state of the same object, so you cannot use layers to create animations.
For example, here is the javascript code to animate the flag icon from the article I mentioned:

flag : {
  url : 'svg/flag.svg',
  animation : [
   {
    el : 'path',
    animProperties : {
     from : { val : '{"path" : "m 11.75,11.75 c 0,0 10.229631,3.237883 20.25,0 10.020369,-3.2378833 20.25,0 20.25,0 l 0,27 c 0,0 -6.573223,-3.833185 -16.007359,0 -9.434136,3.833185 -24.492641,0 -24.492641,0 z"}' },
     to : { val : '{"path" : "m 11.75,11.75 c 0,0 8.373476,-4.8054563 17.686738,0 9.313262,4.805456 22.813262,0 22.813262,0 l 0,27 c 0,0 -11.699747,4.363515 -22.724874,0 C 18.5,34.386485 11.75,38.75 11.75,38.75 z"}' }
    }
   }
  ]
 }

As you can see while the start frame svg file name is clearly indicated, the destination frame is hand coded copying the path and pasting it as the "to" value. You can study this sample on github:

https://github.com/codrops/AnimatedSVGIcons

Adding an animations option to Inkscape, thanks to libraries like snap.svg, is very easy today.
Inkscape should take advantage of this great semplification and implement it. Maybe even saving the animation function inside the svg (it's always the same, and it's very small if you refer to snap.svg externally).

[ScislaC (scislac)]

This would be fully dependent on the implementation of multiple pages. If multiple pages were to be done in a single SVG file/document, you could still not have the same id on a different page.

See the following which point to an id needing a unique name.
http://www.w3.org/TR/SVG/struct.html#Core.attrib

Really, you want an easy way to work with snap.svg. In this case it would probably best be done by an extension akin to the existing extension for jessyink.

[EmanueleSabetta (fmuaddib)]

ScislaC : if that you said is true, and multipage spec does not allow elements with the same id on different pages, it doesn't change the need to implement multipages in Inkscape. We still need multipage support for onion-layered frames. The only difference is that at the end inkscape would save the pages as individual svg files.
Then the snap.svg library will take care of load all svg as frames and tweening the various states of the objects with the same id in all svg frames.
That is not the difficult part. The difficult part is to be able to work on various versions of the same object to animate it. If I want to create a simple flag animated by the wind, I need to create some frames in Inkscape moving the single nodes of the shape frame by frame. With the snap.svg interpolation, I need fewer frames, just 4 keyframes for example, but I still need to compare the various frames while progressively changing the nodes positions. This means that I need the option to have the same objects in different inkscape pages, assigned to an index that will correspond to 1/30th or 1/60th of a second of animation. If I create a 2 frame animation, using page 1 and page 10, the entire animation loop would last 1/3th of a second on a 30fps scale, and 1/6th second on a 60th scale. If I want a slower animation all I need to do is to move the end svg frame from page 10 to page 30 (or to page 60). This is what I did in Flash editor for years, and it works perfectly. It works because it is simple and intuitive. Please add this feature to Inkscape. Even in its basic form, it would be incredibly useful for making svg animations.

[EmanueleSabetta (fmuaddib)]

Look at the attachment image file to see a possible design proposal for a multipage onion skin implementation.

[EmanueleSabetta (fmuaddib)]

Look at the attachment image file to see a possible design proposal for a multipage onion skin implementation.

[Lepe (alepe-com)]

The interface suggested by EmanueleSabetta is great in my opinion. I think the hard part would be implementing the onion skin feature, but if we could have the frame edition first it could be already useful. The easiest way could be to save all frames as individual files in sequence. Onion skin feature and saving all in one SVG animated file could come later.

[gnumaru (lucazfc)]

"Liam P. White" is right in saying that svg animations are made using SMIL (although he mentioned only <animate> tag)

http://www.w3.org/TR/SMIL3/

https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

However, even though it is the standard, and is already supported in firefox and chrome, in pratice, SMIL is dead. No one uses it, and it is seems useless for making complex animations, like animating a horse running or even a short, 1 minute long cartoon.

The question should not be adding svg 1.2's multipage support into inkscape, since every node inside any xml document must have a unique ID, and being on the same file (even though in diferent pages), the same object present in multiple pages can not have the same ID.

Making inkscape export several svg files should be fine for the purpose of trying to animate them using some library, like snap.svg, but it would create the problem that the individual frame-files should not be opened and altered individually running the risk of corrupting the entire animation

The original purpose of inkscape, as it seems was to fully support the full svg specification, an that's why the project stayed for so long with a version number below 0.5. Now the purpose of the project has changed, and that's why the version number jumped from 0.48 straight to 0.91.

Inkscape is not intended for animation production in a fashion similar to adobe flash, and even should not be in my humble current opinion.

That being said, I DO think that inkscape should be more friendly to those trying to make vector animations using svg as a basis (but not using smil, please, smil sucks).

The Keyframe animation with intermediate frames being calculated (tweening) has bem proved by the industry to be the most easy (at least the most vastly used) way for animators (not programmers) creating animations. Flash uses this paradigm since long before Macromedia was bought by Adobe, and I guess they didn't invented it, the paradigm/pratice must be even older. 3D animation software, like blender, uses it as well, and Synfig, an open source vector based animation editor

http://en.wikipedia.org/wiki/Synfig

uses it as well.

The problem is that Synfig is not as good at vector image drawing as is inkscape (not even close, IMHO). It does indeed exists a inkscape plugin that exports the svgs as .sif files, readable by synfing

https://github.com/nikitakit/svg2sif

but once you start animating in synfig, you could not change your image outside synfig. It is possible to convert a sif file back to svg (probably just the first keyframe? I don't know)

http://wiki.synfig.org/wiki/Sif2svg

But, probably, the process of converting svg to sif and back again would remove the animation from the animated sif.

My proposal:

Inkscape should never broke the svg specification, it should never write non-standards compliant svg files. That being said, and knowing that svg is xml, and being xml an extendable markup language, I think inkscape could create an xml namespace with tags intended to support keyframing the svg in a way that an inkscape keyframed animation would be rendered just as a static image in every svg renderer, but the animatio...

[Dave Crossland (davelab6)]

The http://sourceforge.net/projects/inkscape-pages/ extension should be bundled with the next release to provide interim support for this.

[Yash Pal Goyal (yashpalgoyal1304)]

https://gitlab.com/inkscape/inbox/-/issues/2334#note_324039526

I'll close this issue in favor of above mentioned as part of Inkscape's bug migration.

Please feel free to file new bugs about the issues you're seeing at http://inkscape.org/report.

Closed by: https://gitlab.com/yashpalgoyal1304