Animated and Interactive SVG: Essential Tips
The SVG format has turned into a contemporary alternative to Flash in many regards. Not only is it vector-based, but it also renders animations and interactions possible. Due to the different ways to create animations and to integrate SVGs into a web project, you should keep the following tips in mind to make sure that everything works the way you want it to.
<rect x="0" y="0" width="50" height="20"> <animate attributeName="x" from="0" to="100" dur="5s"/> </rect>Using CSS, you get to animate elements in a way similar to how you do it in combination with HTML. The attributes "transition", "animation", and "@keyframes" are available. However, here, you only get to change values via animation that can be defined via CSS, meaning position and color, for example. The shapes of a polygon or a path can not be altered using a CSS animation.
It’s been a pain filtering out web results for up-to-date information. Now if only someone would take this info and add a way of filtering results, e.g. “I want to use SVG [that is animated], [has IE fallback], and [can be controlled via CSS].”
Nice short article :) Actually I’m a flash animator since long time. And I feel the need for another tool to substitute it after the big problem of the SWF in memory leakage. But to be honest flash is super when it comes to usability and flexibility in terms of producing animation, using tools this is not just my opinion but other motion designers, actually the main problem is the complexity in exporting this to other forms to fit the need of other new web technologies as you mentions above.
I think what you talked about summarizes the best ways to apply for web motion graphics but it has withdraws if the animation is long, like having hot computer because it consume from the device processing and this will eat from the power of your device unless your animation is quit short and small, also when having sequence of images run in the background as some websites use to do.