flower.svg

basics

Here's a a great link for help with SVG files.
<g>  <!-- group together elements that are logically the same -->
   <rect x="5" y="5" fill="#AAAA00" width="90" height="90" />
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</g>  <!-- indenting the inner part of the group helps see the grouping -->
<!-- most svg elements are paired like  <g> </g>
   but some you can  have /> as an ending like <rect ... />  -->
The groups are useful when you want to do animations.

translate
rotate
scale
skew
morph
svg1.svg
svg2.svg
svg3.svg
svg4.svg
morphFace.svg

translation

<rect x="5" y="5" fill="#AAAA00" width="90" height="90" />
<g>  <!-- this is a simple "translation" -->
   <animateTransform attributeName="transform" dur="5s" type="translate" values="0,-100;0,0" />
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</g>
Instead of values="0,-100;0,0", you could have used from="0,-100" to="0,0"
But set values ="0,-100;0,0;-100,0;0,0" and then try some of your own combinations.

rotation

<circle cx="50" cy="50" r="40" stroke="#CC0" stroke-width="4" fill="yellow" />
<g>  <!-- this is a simple "rotation" -->
   <animateTransform attributeName="transform" dur="5s" type="rotate" values="-180,50,50;0,50,50" />
   <rect x="20" y="20" fill="green" width="30" height="30" />
   <rect x="50" y="50" fill="#CCCC00" width="30" height="30" />
</g>
Similarly, you can try values="-45,50,50;0,50,50;-45,50,50;0,50,50". Rotations are easier because you can specify the center of rotation--you can also try changing these but it makes things complicated to predict the result...

scaling

<g>  <!-- this is a simple "scaling" -->
   <animateTransform attributeName="transform" dur="5s" type="scale" values="0,0;1,1" />
   <rect x="5" y="5" fill="#AAAA00" width="90" height="90" />
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</g>
Play with values= "initial X, initial Y; final X, final Y". I always like to finish with 1,1....why?

scaling can be tricky since it is always around (0,0).

Here's is one way of handling it.
<g transform="translate(50,50)">
    <g>
       <animateTransform attributeName="transform" dur="5s" type="scale" values="0,0;1,1" />
       <rect x="-45" y="-45" fill="#AAAA00" width="90" height="90" />
       <circle cx="0" cy="0" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </g>
</g>
Here's is another way of handling it without changing the original code.
<g transform="translate(50,50)">
    <g>
       <animateTransform attributeName="transform" dur="5s" type="scale" values="0,0;1,1" />
       <g transform="translate(-50,-50)">  <!-- this is original rect and circle -->
         <rect x="5" y="5" fill="#AAAA00" width="90" height="90" />
         <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
       </g>
    </g>
</g>

skew

<circle cx="50" cy="50" r="40" stroke="#CC0" stroke-width="4" fill="yellow" />
<g>  <!-- this is a simple "skew" -->
   <animateTransform attributeName="transform" dur="5s" type="skewX" values="30;0" />
   <rect x="20" y="20" fill="green" width="30" height="30" />
   <rect x="50" y="50" fill="#CC0" width="30" height="30" />
</g>
Here the values are the skew angles--the angle starts at 30 degrees and goes to 0 degrees.
Unfortunately, skewing things is similar to scaling--it happens around (0,0). So if we want the effect to be around a certain point, we have to do some work.
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<g transform="translate(50,50)">
    <g>
       <animateTransform attributeName="transform" dur="5s" type="skewX" values="45;0" />
       <g transform="translate(-50,-50)">  <!-- this is a simple "scaling" -->
          <rect x="20" y="20" fill="green" width="30" height="30" />
          <rect x="50" y="50" fill="#CCCC00" width="30" height="30" />
      </g>
    </g>
</g>
You can also use "skewY" to skew in the other direction.

Morphing

Here is a simple morphing, or shape changing, example. Each line of the values shows different curves. Actually, there are only three curves: smile, frown, and half and half. In the values, the smile and frowns appear multiple times to have the animation pause at the frowns and the smiles. The important thing is to make sure that the path must be exactly the same structure so that it can know how to animate the change. Here there is one Move point follow by one Curveto. This can become more tricky to ensure the structure remains the same especially if you use a tool like Illustrator to generate the paths...
morphSmile.svg
  <path fill="none" stroke="red" stroke-width="10" d="" stroke-linecap="round">
    <animate attributeName="d" fill="freeze" repeatCount="indefinite" dur="5s"
       values="M 10 60  c 0 30  80 20  80 0;
               M 10 60  c 0 30  80 20  80 0;
               M 10 60  c 0 30  80 -20  80 0;
               M 10 80  c 0 -20  80 -20  80 0;
               M 10 80  c 0 -20  80 -20  80 0;
               M 10 60  c 0 30  80 20  80 0"/>
  </path>

The first one is a bit of a cautionary tale (rotating around a moving point makes things are to predict). On the other hand, the second one is a completely under control.
cRot.svg ccRot.svg