<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" 
  "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="4in" height="3in" 
     viewBox="0 0 400 300"
     onload="StartAnimation()" >

  <defs>
    <script type="text/ecmascript"><![CDATA[
      var timer_increment = 50.
      var max_time = 10000
      var text_element
      StartAnimation() {
        text_element = document.getElementById("TextElement");
        ShowAndGrowElement(0);
      }
      ShowAndGrowElement(timevalue) {
        timevalue = timevalue + timer_increment
        if (timevalue > max_time)
          timevalue = timevalue - floor(timevalue/max_time) * max_time

        // Scale the text string gradually until it is 20 times larger
        scalefactor = (timevalue * 20.) / max_time
        text_element.SetAttribute("transform", "scale(" + scalefactor + ")")

        // Make the string more opaque
        opacityfactor = timevalue / max_time
        text_element.getStyle().setProperty("opacity", "opacity:" + opacityfactor, "")

        // Call ShowAndGrowElement again <timer_increment> milliseconds later.
        setTimeout("ShowAndGrowElement(" + timer_increment + ")")
      }
    ]]></script>
  </defs>

  <g transform="translate(50,300)" style="fill:red; font-size:10">
    <text id="TextElement">SVG</text>
  </g>
</svg>
