© 2004
Canonical Ltd.
•
Terms of use
•
Data privacy
•
Contact Launchpad Support
•
Blog
•
Careers
•
System status
•
35a32c5
(Get the code!)
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://
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,
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:/
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).