<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" onload="init()">
 <script><![CDATA[
 var flag=1;
 var c;

 function init() {
        c= document.getElementById("use")
        setInterval("loop()",500);
 }

 function loop() {
        c.setAttributeNS("http://www.w3.org/1999/xlink","href","#rec"+flag)
        flag= (flag+1) % 3;
}
]]>
</script>


<symbol shape-rendering="optimizeSpeed" id="rec0" viewBox="0 0 64 64">
    <rect width="59" height="59" x="5" y="5" fill="blue" />
    <text x="17" y="56" font-size="60" click="none" > A </text>
 </symbol>


<symbol shape-rendering="optimizeSpeed" id="rec1" viewBox="0 0 64 64">
    <rect width="59" height="59" x="5" y="5" fill="magenta" />
    <text x="17" y="56" font-size="60" click="none" > B </text>
 </symbol>

<use id="use" xlink:href="#rec0"/> 

</svg>