Animating d Attribute

The most important thing in the whole of SVG declarative animation is animating d attributes. That is what really makes SVG declarative animation a significant advance. Unfortunately it is nowhere near as good as the early computer animations:

• GROATS, SPROGS and Fanklin Gracer's IBM system all had the ability to animate between two closed areas with no limitations on the path descriptions.
• Both CAESAR and the National Film Board of Canada software used by Foldes handled single axis rotation. That is an arm rotating by, say, 150 degrees, looked OK as the system handled the rotation about the elbow.

In SVG, you can only animate the d path description if all the entities in the values attribute have the same form, which means:

• Number of commands in the path description must be the same
• The subpath splits must be the same
• Beziers must appear in the same place in both descriptions
• Moves and lines must be in the same position in both descriptions

But it is not totally bad news:

• A command can be absolute in one value and relative in the corresponding command
• A Bezier command can change to a Bezier of a different form (for example a C command can change to a quadratic or one of the shorthands S and T).
• Lines defined by the L command can become H and V commands

As a line is a special case of a cubic Bezier, this arbitrary split between Bezier curves and linear Bezier curves is not required. It is a great pity that implementations do not allow this.

Users have to be aware of this when they are constructing animations involving paths.

<path d="..."> 
<animate attributeName="d" from="M20 100 c ..." to="M80 100 c ..." dur="3s" /> 
</path>

Main point: The two d's must match in structure, same number of subpaths, curves animating to curves, lines to lines, both closed or both open

So doing figure and complex animation in SVG is possible but you almost certainly need good program development support to achieve reasonable results in a finite time.