I look at the <animate> element as a general-purpose SVG animation element because it can do some of everything. For some animations, the more specialized animation elements (<animateColor>, <animateTransform>, <animateMotion>, and <set>) provide additional control or convenience.
One straightforward type of animation that is possible using the <animate> element is linear animation, which can be done horizontally, vertically, or (by combining two animations) diagonally.
Animate a circle horizontally first:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="500" height="300"> ...