SVG représente l'animation comme des éléments intermédiaires dans la structure qui représente l'organisation du graphique. Les éléments Animation apparaissent comme des fils des graphiques qu'ils animent. Pour permettre à l'auteur de se concentrer sur l'animation, une vue Ligne de temps montre toutes les éléments animation et les regroupe pour chaque élément graphique animé.
La vue Ligne te temps visualise les animations associées aux objets graphiques. Chaque objet graphique animé du document est représenté ici, avec une représentation graphique.
La figure suivante montre trois objets animés d'un document. Chaque objet est représenté sur le coté gauche de la vue par un label sur fond blanc et une boîte autour. En cliquant sur le label met en évidence l'élément correspondant dans la vue formatée, montrant ainsi à l'utilisateur le contexte de l'élément. Si l'élément graphique possède un seul élément d'animation (comme l'élément Rectangle dans la figure), l'élément d'animation est visualisé comme une barre colorée. Si l'élément graphique possède plusieurs éléments d'animation, une seule barre grise représente l'ensemble des animations (Circle en bas de la figure), et un bouton '+' dans le label permet à l'utilisateur d'expanser la représentation. L'élément MyText est un exemple d'une telle expansion, où chaque animation est représentée par une barre colorée.
La position sur la ligne de temps dépend de quand l'animation débute et s'arrête et la couleur de la barre reflète le type d'animation :
animate,set,animateMotion,animateColor,animateTransform
La vue Ligne de temps est utile pour percevoir rapidement l'animation de
tous les graphiques du document, mais elle permet aussi à l'auteur d'éditer
les animations. Les éléments existants peuvent être modifiés. La plupart des
manipulations sont faites sur la ligne de temps, comme le déplacement d'une
barre ou son changement de longueur. ceci est immédiatement reflété sur les
autres vues où les attributs de l'élément d'animation sont mis à jour (les
attributs begin et dur dans ce cas).
Quand on crée un mouvement d'un élément graphique existant :
Cliquer Ctrl + Bouton gauche de la souris sur l'onglet rouge de la ligne de temps et le déplacer à la bonne position de départ.
L'élément devrait avoir un ID. Cet ID sera utilisé comme label de l'élément.
en haut à gauche de la vue
Linge de temps.
Ceci crée un nouvel élément d'animation dans cette vue.
Cliquer Ctrl + Bouton gauche de la souris sur l'icône 
dans la vue formatée. Ainsi, il
peut contrôler les positions clé de l'élément animé dans le contexte des
autres graphiques.
La manipulation du temps dans la vue Ligne de temps est plus confortable, puisque l'utilisateur comprend mieux la synchronisation d'un élément particulier avec les autres éléments animés. Les autres vues sont aussi accessibles et certains paramètres peuvent être ajustés en éditant les attributs dans la vue structure ou dans la vue source si nécessaire.
Quand on crée un changement de couleur d'un élément graphique existant :
en haut à gauche de la vue
Ligne de temps.L'utilisateur peut manipuler les barres de représentation des animation comme il manipule un rectangle dans le document. Evidement quelques contraintes sont données dans la vue Ligne de temps. Par exemple, les barres colorées ne peuvent bouger uniquement en horizontal sur l'axe de la ligne de temps, et la hauteur de peut pas être modifiée.