Trois éléments permettent l'animation :

<animate> via une modification des attributs (position, dimension et couleur de la forme)
<animateMotion> via un déplacement (sur un chemin)
<animateTransform> via la rotation, la translation et l'agrandissement.

<animate>

Cette animation est fondée sur la modification d'attributs dans le temps.

<animateColor> ne doit plus être utilisée

<svg width="120" height="120">
  <title>Carré changeant de position, de couleur et de taille</title>
  <rect x="10" y="10" width="100" height="100">
    <animate attributeName="x" from="-100" to="120"
     dur="10s" repeatCount="indefinite"/>
     <animate attributeName="y" from="-100" to="120"
     dur="10s" repeatCount="indefinite"/>
     <animate attributeName="fill" values="red;blue;red"
     dur="10s" repeatCount="indefinite"/>
  </rect>
</svg>

La balise <animate> est contenue dans celle qu'elle doit être animée.

Autant d'attributs à modifier, autant de balises <animate> à inclure.

Principaux attributs :

attributeName : indique le nom de l'attribut à modifier
from : indique la valeur de l'attribut indiqué au début de l'animation
to : indique la valeur de l'attribut indiqué à la fin de l'animation
dur : indique la durée de l'animation (clock-value)
begin : indique le départ de l'animation.
Une animation peut démarrer plus d'une fois. Chaque valeur de l'attribut "begin" est séparée par un point-virgule.
- depuis le chargement de la page (en s, ms, ...)
- depuis un événement
  - "click" de l'utilisateur (=> la forme a une surface => fill!="none")
    Le "click" n'est donc pas compatible avec la transparence. Toutefois, l'élément qui reçoit le clic peut être la balise <svg>.
    begin="svg.click" ou begin="svg.click +3s"
    L'événement "click" n'agit pas si le code SVG n'est pas intégré à la page HTML.
    Et, dans l'expression id.event (tel que svg.click), l'identifiant de l'objet qui peut être cliqué doit être unique sur cette page HTML.
  - depuis la fin d'une autre animation identifiée
    begin="animation1.end"
Plus d'info sur MDN
end : (facultatif). Attention, Un événement (tel que "click") n'agit plus lorsque la valeur de L'attribut "end" est atteinte.
fill : (facultatif) indique l'état final. La valeur "freeze" gèle l'animation
Lorsque l'attribut fill n'appartient pas à une balise d'animation, il sert à définir la couleur de remplissage ou l'absence de remplissage (avec la valeur "none")
repeatCount : (facultatif) indique le nombre de répétition de l'animation (n | indefinite)

avec n, entier positif non nul

Si repeatCount est supérieur à 0, l'animation ne sera pas gélée

Une coordonnée d'une série peut être modifiée ...

<svg width="200" height="100" id="svg2">
  <title>Modification de coordonnées dans le temps</title>
  <polygon points="" fill="yellow">
    <animate attributeName="points" begin="0s; svg2.click" dur="10s" fill="freeze"
      from="75,90   0,10 125,90"
        to="70,90 200,10 125,90"/>
  </polygon>
</svg>

<animateMotion>

Déplacement d'une forme

Cette animation est fondée sur le déplacement le long d'une courbe.

<svg width="240" height="100">
  <title>Déplacement le long d'une courbe</title>
  <rect x="0" y="0" width="30" height="15">
    <animateMotion dur="5s" repeatcount="indefinite"
    path="M10,50 q60,50 100,0 q60,-50 100,0"/>
    </rect>
</svg>

L'animation est l'enfant de la forme.

L'attribut rotate="auto" permet de poser la forme en fonction de la tangente de la courbe.

<svg width="240" height="100">
  <title>Déplacement suivant la tangente d'une courbe</title>
  <rect x="0" y="0" width="30" height="15">
    <animateMotion dur="5s" repeatcount="indefinite" rotate="auto"
    path="M10,50 q60,50 100,0 q60,-50 100,0"/>
    </rect>
</svg>

Dessiner le chemin et le parcourir

La balise <mpath>, enfant de <animateMotion>, permet de lier le chemin à suivre à un chemin dessiné et identifié.

<svg width="240" height="100">
  <title>Suivant un chemin donnée via la balise mpath</title>
  <path d="M10,50 q60,50 100,0 q60,-50 100,0" fill="none" stroke="black" id="myPath" />
  <rect x="0" y="0" width="30" height="15">
    <animateMotion dur="5s" repeatcount="indefinite" rotate="auto">
      <mpath href="#myPath" />
    </animateMotion>
  </rect>
</svg>

Déplacement de plusieurs formes

<svg width="240" height="190">
  <title>Plusieurs formes liées ensemble</title>
  <g>
    <animateMotion id="motion1" dur="5s" repeatcount="indefinite"
      rotate="auto" path="M10,50 q60,50 100,0 q60,-50 100,0" />
    <rect x="0" y="0" width="30" height="15" />
    <circle cx="15" cy="20" r="5" fill="black" />
 </g>
</svg>

L'animation doit être déclarée avant les formes.

Plusieurs déplacements de formes

<svg width="240" height="200">
  <title>Plusieurs formes non liées</title>
  <rect x="0" y="0" width="30" height="15">
    <animateMotion dur="5s" repeatcount="indefinite" path=
      "M10,50 q60,50 100,0 q60,-50 100,0"/>
    </rect>
  <circle cx="5" cy="95" r="5" fill="black">
    <animateMotion dur="5s" repeatcount="indefinite" path="M230,0 L0,90"/>
  </circle>
</svg>

Autant de déplacements, autant de balises <animateMotion>.

<animateTransform>

Cette animation est fondée sur la translation, agrandissement et/ou rotation.

La balise <animateTransform> est contenue dans celle qu'elle doit être animée ou contenue dans la balise <g> dans laquelle se trouve l'animation et les formes liées à cette animation.

Principaux attributs :

attributeName = "transform" (obligatoire)
Attribut théoriquement inutile puisqu'il n'existe qu'une seule valeur autorisée.
type : translate | scale | rotate | skewX | skewY
- translate
  Le point de référence de la forme à animer (ici, déplacer) est son point gauche supérieur
  - from : x1 y1 (au début de l'animation)
    - x1 : entier, position en x du point de référence de l'objet à déplacer
    - y1 : entier, position en y du point de référence de l'objet à déplacer
    Exemple : "0 0"
  - from : x2 y2 (à la fin de l'animation)
    - x2 : entier, position en x du point de référence de l'objet à animer
    - y2 : entier, position en y du point de référence de l'objet à animer
    Exemple : "60 60"
- scale
  Le point de référence de la forme à animer (ici, grossir) est son point gauche supérieur
  Le facteur de grossissement concernent les dimensions et la position.
  Le facteur 0 réduit ces tailles et position à zéro (= point de référence)
  Le facteur 1 correspond aux taille et position définies (de la forme à animer)
  Un facteur supérieur à 1 agrandit
  - from : fx1 fy1 (au début de l'animation)
    - fx1 : entier, facteur en x
    - fy1 : entier, facteur en y
    Exemple : "0 0"
  - from : fx2 fy2 (à la fin de l'animation)
    - fx2 : entier, facteur en x
    - fy2 : entier, facteur en y
    Exemple : "1 1"
- rotate
  - from : angle cx cy (au début de l'animation)
    - angle : entier (en degré)
    - cx : entier, position en x du centre de rotation
    - cy : entier, position en y du centre de rotation
    Exemple : "0 60 60"
  - to : angle cx cy (à la fin de l'animation)
    Si les valeurs relatives à cx et cy sont différentes de celles de l'attribut from la rotation est "bizarre".
- skewX
- skewY
dur : indique la durée de l'animation (clock-value)
fill : (facultatif) indique l'état final. La valeur "freeze" gèle l'animation
repeatCount : (facultatif) indique le nombre de répétition de l'animation (n | indefinite)

avec n, entier positif non nul

Si repeatCount est supérieur à 0, l'animation ne sera pas gélée

Translation

La translation ne modifie pas la forme (ni les angles, ni les côtés).

Translation d'une forme

<svg width="180" height="180">
  <title>Translation d'une forme</title>
  <line x1="0" y1="60" x2="60" y2="60" stroke="black">
    <animateTransform attributeName="transform" type="translate"
    from="0 0" to="60 60" dur="5s"
    repeatcount="indefinite" />
  </line>
</svg>

Même translation pour plusieurs formes

<svg width="180" height="180">
  <title>Même translation pour plusieurs formes</title>
  <g stroke="black">
    <animateTransform attributeName="transform" type="translate"
      from="0 0" to="60 60"
       dur="5s" repeatcount="indefinite" />
    <line x1="0" y1="60" x2="60" y2="60" />
    <rect x="60" y="60" width="45" height="20" />
  </g>
</svg>

L'animation doit être déclarée avant les formes.

Différentes translations pour plusieurs formes

<svg width="180" height="180">
  <title>Différentes translations pour plusieurs formes</title>
  <line x1="0" y1="60" x2="60" y2="60" stroke="black">
    <animateTransform attributeName="transform" type="translate"
      from="0 0" to="60 60"
      dur="5s" repeatcount="indefinite" />
  </line>

  <rect x="60" y="60" width="45" height="20">
    <animateTransform attributeName="transform" type="translate"
      from="0 0" to="0 -60"
      dur="5s" repeatcount="indefinite" />
  </rect>

</svg>

Autant de translations, autant de balises <animateTransform>.

Agrandissement

Agrandissement d'une forme

<svg width="180" height="180">
  <title>Agrandissement d'une forme</title>
  <circle cx="50" cy="50" r="30">
    <animateTransform attributename="transform" type="scale"
      from="0 0" to="1 1"
      dur="5s" repeatcount="indefinite" />
  </circle>
</svg>

Même agrandissement pour plusieurs formes

<svg width="180" height="180">
  <title>Même agrandissement pour plusieurs formes</title>
  <g stroke="black">
    <animateTransform attributeName="transform" type="scale"
      from="1 1" to="0 0"
       dur="5s" repeatcount="indefinite" />
    <line x1="0" y1="60" x2="60" y2="60" />
    <rect x="60" y="60" width="45" height="20" />
  </g>
</svg>

Différents agrandissements pour plusieurs formes

<svg width="180" height="180">
  <title>Différents agrandissements pour plusieurs formes</title>
  <line x1="0" y1="60" x2="60" y2="60" stroke="black">
    <animateTransform attributename="transform" type="scale"
      from="0 0" to="1 1"
      dur="5s" repeatcount="indefinite" />
  </line>

  <rect x="60" y="60" width="45" height="20">
    <animateTransform attributename="transform" type="scale"
      from="1 1" to="0 0"
      dur="5s" repeatcount="indefinite" />
  </rect>

</svg>

Autant de redimensionnements, autant de balises <animateTransform>.

Rotation

Rotation d'une forme

<svg width="180" height="180">
  <title>Rotation d'une forme</title>
  <line x1="0" y1="60" x2="60" y2="60" stroke="black">
    <animateTransform attributeName="transform" type="rotate"
    from="0 60 60" to="360 60 60"
    dur="5s" repeatcount="indefinite" />
  </line>
</svg>

Même rotation pour plusieurs formes

<svg width="180" height="180">
  <title>Même rotation pour plusieurs formes</title>
  <g stroke="black">
    <animateTransform attributeName="transform" type="rotate"
      from="0 60 60" to="-360 60 60"
       dur="5s" repeatcount="indefinite" />
    <line x1="0" y1="60" x2="60" y2="60" />
    <rect x="60" y="60" width="45" height="20" />
  </g>
</svg>

Différentes rotations pour plusieurs formes

<svg width="180" height="180">
  <title>Différentes rotations pour plusieurs formes</title>
  <line x1="0" y1="60" x2="60" y2="60" stroke="black">
    <animateTransform attributeName="transform" type="rotate"
      from="0 60 60" to="360 60 60"
      dur="5s" repeatcount="indefinite" />
  </line>

  <rect x="60" y="60" width="45" height="20">
    <animateTransform attributeName="transform" type="rotate"
      from="0 60 60" to="-360 60 60"
      dur="10s" repeatcount="indefinite" />
  </rect>

</svg>

Autant de rotations, autant de <animateTransform>.

Plusieurs transformations d'une forme

L'attribut additive="sum" permet de cumuler les transformations. Ci-dessous, transalation + agrandissement + rotation d'une ligne.

<svg width="180" height="180">
  <title>Plusieurs transformations d'une forme</title>
  <line x1="0" y1="60" x2="60" y2="60" stroke="black">
    <animateTransform attributename="transform" dur="5s" repeatcount="indefinite" additive="sum"
      type="translate" from="0 0" to="60 60" />
    <animateTransform attributename="transform" dur="5s" repeatcount="indefinite" additive="sum"
      type="scale" from="0 0" to="1 1" />
    <animateTransform attributename="transform" dur="5s" repeatcount="indefinite" additive="sum"
      type="rotate" from="0 60 60" to="360 60 60" />
  </line>
</svg>

Autant de transformations simultanées, autant de balises <animateTransform> dans la balise contenante.
Autant de transformations successives, autant de balises contenant une ou plusieurs balises <animateTransform>.

Attributs d'animation

Le format APNG (Animated Portable Network Graphics) semble avoir été abandonné.
Le format GIF (Graphics Interchange Format), naquit en 1987 (avec le web) et y connut un grand succès. Dorénavant, il est dans le domaine public (selon les régions, depuis 2003-2006).

Au niveau de l'animation, le format SVG semble donc être le plus performant, tant au niveau de la légèreté du fichier que de son implémentation dans les navigateurs, de la couleur transparence, de la facilité de la modifier par programmation, de la non pixellisation ...

Exemple d'une animation SVG qui ne pèse que 12 188 octets : Toy_train_SMIL

Spécifications
SVG animation (en)