<svg width="4cm" height="2cm" viewBox="0 0 400 200" onload="StartAnimation(evt)" version="1.1">
     <script type="text/ecmascript"> var timevalue = 0; var timer_increment = 50; var max_time = 5000; var text_element; function StartAnimation(evt) { text_element = evt.target.ownerDocument.getElementById("TextElement"); ShowAndGrowElement(); } function ShowAndGrowElement() { timevalue = timevalue + timer_increment; if (timevalue > max_time) return; // 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.setAttribute("opacity", opacityfactor); // Call ShowAndGrowElement again <timer_increment> milliseconds later. setTimeout("ShowAndGrowElement()", timer_increment) } window.ShowAndGrowElement = ShowAndGrowElement </script>
     <rect x="1" y="1" width="398" height="198" fill="none" stroke="blue" stroke-width="2"/>
     <g transform="translate(50,150)" fill="red" font-size="7">
          <text id="TextElement">SVG</text>
     </g>
</svg>
Original SVG source