HTML5 canvas doesn't fill in the blank IMO because it's too low-level. (Plus, its performance scales with canvas size where SVG's performance scales with the number of objects.)
Example: suppose I inject the following innerHTML into an svg: <rect width="80" height="80"><title>The incredible disappearing rect!</title></rect>. Now I set rectElem to that rect element and do this: rectElem.animate( { opacity: [1, 0, 1] }, { duration: 5000, iterations: Infinity } );
That's actually pretty expressive. The unnecessary complexity is unfortunately even apparent here, though: a) the interrelationship between xml attrs for width/height and css property for opacity (SVG2 apparently simplifies this by making all attrs available as css properties), and b) the <title> tag points to the fact that SVG is in its own separate XML namespace, which causes all kinds of pain.
Example: suppose I inject the following innerHTML into an svg: <rect width="80" height="80"><title>The incredible disappearing rect!</title></rect>. Now I set rectElem to that rect element and do this: rectElem.animate( { opacity: [1, 0, 1] }, { duration: 5000, iterations: Infinity } );
That's actually pretty expressive. The unnecessary complexity is unfortunately even apparent here, though: a) the interrelationship between xml attrs for width/height and css property for opacity (SVG2 apparently simplifies this by making all attrs available as css properties), and b) the <title> tag points to the fact that SVG is in its own separate XML namespace, which causes all kinds of pain.