A couple of days ago I was asked to look into animations that would work on iPad. You could use CSS3 tranformations, but I was excited to see what I could do in SVG instead. Why? Because why not!
Off I went, and not too much longer I had this: http://www.tabeoka.be/downloads/svg/blokskes.svg . Cute. Works smoothly on all browsers that matter. Is a little jittery on Opera.
Back to my image though: I could slap an image on there, and pretend the website is being swallowed by a maelstrom. Right?
Well, here's a unicorn with an unfortunate case of being torn into rectangles: http://www.tabeoka.be/downloads/svg/blokskes_fill.svg . The most unfortunate part though, is that the unicorn is being torn up very slowly. Unfortunate for the unicorn, certainly, but more unfortunate for my ambition to animate stuff using SVG. What's up with that?
I must be doing something wrong. I can't believe my computer can render this, but not chop up a unicorn (where are its priorities?). Internet Explorer 9 is supposed to have hardware accelerated svg rendering. If this is the result, it must have needed that acceleration real bad. And I can believe Microsoft messed up SVG performance in IE, but every damn browser is slow!
In the past I did some animation where I would suspend rendering while updating the object hierarchy, and then restart rendering. But this article suggests browsers are not stupid; that's too bad. I think I am to conclude that fully SVG-driven animations are not quite ready from prime time. But when the performance catches up, the object model will be ready. I like SVG, but it's such a tease.