La norme SVG procure un support pour les dessins animés à la fois en interne grâce à des éléments d'animation et en externe par des scripts. Cette section présentera une animation simple utilisant ECMAscript (une norme dont JavaScript et JScript sont des dialectes). Bien qu'il y ait des projets de support d'animation dans Inkscape, pour le moment il n'y a pas de support. Ajouter une animation nécessite l'édition du fichier SVG avec un éditeur de texte.

Dans le dessin SVG suivant, le carré bleu oscille d'avant en arrière (dans un visualiseur supportant le SVG). Le carré change encore d'opacité quand la souris est au-dessus et contient également un lien hypertexte.

<?xml version="1.0"?>

<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.0"
   width="150"
   height="150"
   onload="Start(evt)"     
   id="svg11341">
  <defs
     id="defs1343" />
  <style
     id="style1324"
     type="text/css" >
     rect:hover {fill-opacity:1.0;}
  </style>

  <script type="text/ecmascript"><![CDATA[     

    var time = 0;
    var delta_time = 50;
    var max_time = 1000;
    var dir = 1;

    var the_rect;

    function Start(evt) {     

      the_rect = evt.target.ownerDocument.getElementById("rect1353");     
      Oscillate();
    }

    function Oscillate() {
      time = time + dir * delta_time;
      if (time >  max_time)  dir = -1;
      if (time < -max_time)  dir =  1;

      // Calculate x position
      x_pos = (time * 25) / max_time;
      the_rect.setAttribute("transform", "translate(" +x_pos+ ", 0.0 )");

      // Repeat
      setTimeout("Oscillate()", delta_time)
    }

    window.Oscillate = Oscillate
  ]]></script>     

  <g
     id="layer1">
    <a
       xlink:href="http://www.w3.org/"
       style="fill-opacity:0.75"
       id="a1445">
      <rect
         width="90"
         height="90"
         x="30"
         y="30"
         style="fill:#0000ff;stroke:#000000;stroke-width:1px"
         id="rect1353" />
   </a>
 </g>
</svg>