When you are learning SVG, it is easy to get confused by these two terms. There is a significant difference between transformation and animation, but it some ways they are similar. With one process, you change the look of your shape. With the other, you initiate action to change to look of your shape within the graphic.
Transformation in SVG allows you to take a form that you have already drawn and modify it in some way. For example, you could use a square and rotate it in one direction so that it sits at an angle. You could take that same square and make it smaller, or larger to suit the needs of the page you are designing. In pure transformation, there is no movement. The images are static. This approach enables you to build templates and change the structure as you need to without redesigning it.
Animation creates a moving picture. The shape in your SVG file may change upon loading, or when a viewer clicks on the image. Flash is a form of animation that uses a storyboard design to make the movement. SVG works within a mathematical platform, but provides similar results.
How are Transformation and Animation the Same?
If you want to change the size of your square, you can do that with the 'scale' transformation function. When you code it strictly as a transformation, the square will appear to be a different size on the screen. The action happens without the viewer knowing something changed.
To create a more dynamic look you follow the same process, but add animation to the structure. With animation, the original shape will appear and then scale in front of the viewer. The final product is the same, but one happens behind the scenes and the other right on the page. Animation uses some elements of transformation, and you may see the same tags as you master these two SVG processes.
Making Animation Work