What I did find in my searches were SMIL animations that morph a single path/shape (best example is this Batman logo morphimation), so I adapted that idea to animate an SVG image with many paths.
While jQuery is not really necessary for a simple morphimation like the Batman logo, my version is too complex to create all the SVG and SMIL attributes by hand. For that reason, I set it up so all I have to do is export an SVG file from my vector drawing program. Then I’m using jQuery to read in that file, parse it, create the inline SVG and its animate tags, and then populating those tags with values for each frame. Easy!
I cleaned up my code a bit and put it on Github in case anyone wanted to do something similar. I was actually going to clean it up a lot more and make it easier to reuse, but….
Well, dang it, I found out only after doing all this that SMIL is going the way of the HTML “font” tag — deprecated!! Oh noes! I don’t know how I missed this while I was working on the project, but, well, crap.
It was a good learning experience nonetheless. From what I’ve read, it doesn’t sound like there’s currently an alternative way to do this kind of animation. I’ll have to look into that further.
Oh yeah — I also added a mouse hover effect just for fun. Roll-over the animation with your mouse (sorry, no fun for touch screen users) to see what happens.