Initially, we targeted the ASV3 plug-in with IE using SMIL animation with the animateTransform element. We found that as the number of turbines on a diagram increased, so did the frequency of IE crashes and unexpected graphical behaviors. As an alternative, we began using JavaScript to simulate the animation. We thought this might provide better scalability for IE as well as allowing us to achieve animation in Firefox, since Firefox still has no support for SMIL animation.

I did some permutations on your provided source to see what gives better performance. I couldn't get any script version to run faster/smoother than a corresponding SMIL animation version.

Some suggestions:

1. combine the path elements into one by concatenating the d-attributes, one path element for the animated part, one path element for the static part
   
2. drop the style attributes
   
3. if you're still going with a script version insert only one <use> element instead of three elements
   
4. hubX/hubY are static, so hardcode them instead of doing parseFloat
   
5. try doing cloneNode on the turbine group instead of creating <use> elements, and build an array of the elements you want to animate as they are inserted, then update the transform attribute on those elements
   
   

Another option that I explored was to use a <pattern> of the turbine. A pattern is similar to a texture. Then you get faster tiling as well as animation synchronization almost for free. The downside is that using the pattern will be great if you use it on one element, and is best if you have a quite regular structure. Your example animated much more quickly when using a pattern containing the turbine on a rect covering the entire viewport.

In the end I would opt for a solution being something like this:

• a "turbine" group containing two subgroups, one animated "turbineBlades" and one static "turbineBase"
  
• the "turbineBlades" group gets an <animateTransform> element that does the rotation
  
• the init-function in script then inserts the desired number of <use> elements with xlink:href="#turbine"
  
  

Having implemented the two very helpful suggestions from the responses to my post, here is an updated version of the code.  Tor is correct, of course, in his suggestion for Firefox.  Memory consumption is greatly reduced in the new version, although the animation is still a bit choppy. Perhaps frame-based animation would be a better approach for me to take?
----------
<?xml version="1.0" encoding="utf-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1200"
height="1200"
id="TurbineMapScratchPad"
version="1.0"
onload="InitMe(evt);"
>
<script type="text/ecmascript" >
    <![CDATA[

    var svgDocument = null;
    var svgRoot = null;
    var bladeRotation=0;
    var svgns = "http://www.w3.org/2000/svg";
    var xlinkns = "http://www.w3.org/1999/xlink";
    var svgUserAgent = null;

    function InitMe(evt)
    {
        svgUserAgent = navigator.appName;

        if ( svgDocument === null )
         {svgDocument = evt.target.ownerDocument;}   

        svgRoot = svgDocument.documentElement;
        for(var y=10; y<600; y+=70)
        {
            for(var x=20; x<720; x+=40)
            {
                var index = x*y;
                var gTurbine         = svgDocument.createElementNS(svgns,"g");
                var gBlades = svgDocument.createElementNS(svgns,"g")
                var gBase = svgDocument.createElementNS(svgns,"g");
                var bladesUse    = svgDocument.createElementNS(svgns,"use");
                var baseUse = svgDocument.createElementNS(svgns,"use");
                var transNode = svgDocument.getElementById('animTrans');

                gTurbine.setAttributeNS(null,'id','turbine');
                gTurbine.setAttributeNS(null,'transform','translate(' + x + ',' + y + ') scale(4.0)');
                gBlades.setAttributeNS(null,'id','blades');

                gBase.setAttributeNS(null,'id','base');

                bladesUse.setAttributeNS(xlinkns,'href','#bladePath');
                bladesUse.setAttributeNS(null,'id','bladeUse');
                baseUse.setAttributeNS(xlinkns,'href','#basePath');

                gBase.appendChild(baseUse);
                gBlades.appendChild(bladesUse);
                if(svgUserAgent != "Netscape" && null != transNode)
                {                   
                    var newTrans = transNode.cloneNode(true);
                    gBlades.appendChild(newTrans);
                }
                gTurbine.appendChild(gBase);
                gTurbine.appendChild(gBlades);                
                svgRoot.appendChild(gTurbine);
            }
        }
        if(svgUserAgent == "Netscape") //Mozilla Firefox       
        {
            setInterval('animateBladesFF()',10);           
        }

    }

    function animateBladesFF()
    {
        root = document.getElementById("TurbineMapScratchPad");
        id = root.suspendRedraw(1000);
        var hubX=7.1;
        var hubY=6.6;

        var animList = svgDocument.getElementsByTagName("use");
        for(var i=0; i<animList.length; i++)
        {
            var node = animList.item(i);
            if(node.id=='bladeUse')
            {
                bladeRotation = bladeRotation + 2;
                if(bladeRotation > 360)
                {
                    bladeRotation=0;
                }
                node.setAttributeNS(null,'transform','rotate(' + bladeRotation + ',' + hubX + ',' + hubY + ')');
            }
        }
        root.unsuspendRedraw(id);
    }

    //]]>
</script>
<defs>
            <animateTransform id="animTrans" attributeName="transform"
                type="rotate" from="0,7.1,6.6" to="360,7.1,6.6" begin="0s" dur="3.0s"
                repeatCount="indefinite"
            />
            <g id="turbineBlades">
                <circle id="bladeHub" cx="7.1" cy="6.6" r="0.5" style="fill:black"/>
                <path id="bladePath"
                    d="
                    M 6.7203394,6.9568743
                    C 5.5101085,10.802047 5.5101085,10.802047 5.5101085,10.802047
                    L 5.1509285,12.769531
                    L 5.1509285,12.769531
                    L 7.2122104,7.0466693
                    M 7.5184653,6.8204787
                    C 11.453598,5.945983 11.453598,5.945983 11.453598,5.945983
                    L 13.337079,5.2733
                    L 13.337079,5.2733
                    L 7.3502946,6.3496084
                    M 7.0542563,6.2458097
                    C 4.3293545,3.2751324 4.3293545,3.2751324 4.3293545,3.2751324
                    L 2.8050536,1.9803314
                    L 2.8050536,1.9803314
                    L 6.7305561,6.626885"
                />

            </g>
            <g id="turbineBase">
                <path id="basePath"
                    d="
                    M 6.8684577,7.1257859
                    C 6.8684577,11.288829 6.8684577,11.288829 6.8684577,11.288829
                    L 7.3010127,11.288829
                    L 7.3010127,7.1257859
                    L 6.8684577,7.1257859
                    L 6.8684577,7.1257859
                    M 6.5893374,11.295157
                    C 6.5893374,18.210662 6.5893374,18.210662 6.5893374,18.210662
                    L 7.5738901,18.210662
                    L 7.5738901,11.295157
                    L 6.5893374,11.295157
                    L 6.5893374,11.295157"
                  />
            </g>

</defs>
</svg>    

I found Opera more faster than firefox in svg rendering.
Here you can find opera svg support list:
http://www.opera.com/docs/specs/svg/

hope will be helpful =============== antonio caccamo

Thanks for the updated code, it is much faster than the original one.

This example has poor performance on Firefox due to the way we currently implement <use>, which is by doing an anonymous clone of the content tree. Updates to the original cause a reclone, which if <use> is used lightly isn't a big problem, but as in your example you have a large number of cloned objects to be updated each frame it will cause problems.

It might be faster to do something like the following:

  root = document.getElementById("TurbineMapScratchPad");
  id = root.suspendRedraw(1000);
  ... loop through each <use> and assign them a transform ...
  root.unsuspendRedraw(id);