Is WebGL or Canvas the only way to get SVG Keyframe Animations Hardware Accelerated?

Question

What I'm looking is a flash alternative for mobile phones using html5.

I was looking into SVG and it seems the only way to get hardware acceleration is to use CSS transforms on it. But CSS transforms aren't enough, I want to animate the actual nodes that make up a vector (ie, points on a path) so I could get more sophisticated character animation. To do this I was looking at some gui based editors.

I checked what adobe has been up to and they seem to have killed Edge Animate and rebranded Flash as "Animate CC" for 2016.

http://blogs.adobe.com/creativecloud/update-about-edge-tools-and-services/ https://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-for-flash-professional/

But reading up on "Animate CC" I see that it exports vector animations to either Canvas or WebGL. Which I think is due to them not getting hardware acceleration with native SVG via SMIL or using javascript. https://css-tricks.com/guide-svg-animations-smil/

Another one is http://www.animatron.com which converts everything to canvas as well.

So my question is, in order to do keyframe animations on nodes within a vector path, a vector needs to be converted to either WebGL or Canvas for it to be hardware accelerated on mobile?

p.s I prefer using SVG as it's loaded in the DOM and I can manipulate things with jquery. This is for a mobile game that uses vectors (svg) as its base but I'd like to incorporate animations too - beyond the basic css transforms. I wish there was a way to have a .svg file that not only contains the vector information but also the animation info. so I could load this .svg file. and then in javascript go: character1.play('animation1') or something. If SMIL worked fast I'm sure editors like adobe would make it as simple as that.

EDIT: I just read that Chrome 45 killed SMIL in favor of "web animations" and css. https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL And as Kaiido mentioned in the comments IE never supported smil so maybe that's why adobe never exported to it (?). http://caniuse.com/#feat=svg-smil also I never saw any examples online that show hardware accelerated path animation with smil, if any of you guys find a link pls let me know.

EDIT #2: I'm thinking of giving up my wishful thinking and instead looking at vector to canvas exporters like animatron.com. However, it doesn't seem like canvas is even hardware accelerated or fast like css3 transforms. I loaded some animations from animatron in my old iPhone 4s/iOS 8 and it's jittery and slow for example: https://www.animatron.com/project/1953f3526e5b2ec4eef429c8 whereas css3 transform animations always run very smooth...

I still haven't tested vector to webgl.. but I think that's why adobe eventually chose to use it for their vector animations since canvas is slow and svg is limited.

EDIT #3: sure enough it seems like webgl is the way to go (unless someone finds a way to do this with native svg) http://www.yeahbutisitflash.com/?p=7231 .. this works fast in my iphone 4s/ios8.. I currently think this is the only way to do what I want: hardware accelerated vector based animation (however the graphics don't look as crisp as I'd want them.. webgl kinda messed with that I think). but this is why I think Edge Animate got killed cause they were trying to create a tool that took advantage of css3 transforms, but ppl want to animate vector nodes so they went back to Flash and rebranded it. (another note: the above webgl anim doesn't work so well on my galaxy S4/kitkat android phone.. so this is mainly for newer devices/OSs)

EDIT #4: come to think of it. it'd be a pain to have multiple webgl contexts running in my program. so if I had 10 animated characters I'd have to have 10 webgl contexts which would be intense for a mobile device.. unless I chose to do the whole game in flash, and then I'd have one big webgl context after I export it. but I prefer to work in the dom. oh well css3 transforms for the meantime.. :/

EDIT #5 - Dec 2016: I'm now using svg/javascript with snap.svg. modern phones seem fast enough.

Other Useful Links I Found:

http://www.crmarsh.com/svg-performance/

Answer 1

This library/plugin might be exactly what you are looking for: Greensock SVG Morph Plugin. It seems to perform pretty well on mobile, not sure how well it performs on devices mentioned by you.

It's also not GPU accelerated but Greensock Animation Platform seems to perform extremely well even on mobile devices.

Answer 2

Canvas is (as far as i know) software accelerated. So it's rendered by the processor (CPU). The processor (cause of them pixels) ain't that good at graphical stuff but for simple things it would be enough. And it runs everywhere, where there is a processor.

If you want to have better performance on hardware accelerated devices which most modern smartphones are, you need webgl. But you can export your stuff in webgl from adobe CC. Older smartphones are not very optimized on hardware acceleration so please check with your target group what devices they have and try to run your app on one of the slowest devices.

I would not use SVG. SVG is even worse than DOM. You can be faster manipulating HTML in javascript than SVG. I don't know why but it is damn slow. SVG is just an alternative if you want to have scalable graphics or charts and that's what it is made for. To animate in SVG is a pain. Don't do it. It is not optimized for animation.

CSS-Transform is a prototype-like and will not help you with keyframe animation. But it has potential to have an eye on it.

Does this help you?