Which is lighter: polygon or path?

I am rendering a map composed by 600+ SVG elements aligned in a cartesian plane. I need them to be separate elements because I want them to individually respond to mouse events, etc.

My question is: for the purpose of applying a lot of transformations like "translate" (changing their positions) for example, which option is "lighter" to browsers?

Rendering polygons like this hexagon:

<polygon points="43.301270189221924,55 43.301270189221924,65 51.96152422706631,70 60.6217782649107,65 60.6217782649107,55 51.96152422706631,50"></polygon>

... or creating them as paths like this one:

<path d="M43.301270189221924,55L43.301270189221924,65L51.96152422706631,70L60.6217782649107,65L60.621开发者_如何学运维7782649107,55L51.96152422706631,50Z"></path>

I doubt there's going to be much difference, but if there is any, I'd expect polygon to be marginally faster, since it's specifically meant for, you know, polygons.

In fact, after running two profiling scripts (see below), my above assessment appears correct. Polygons are a little bit faster than paths in all browsers, but the difference is hardly significant. So I doubt you really need to worry about this. Luckily, polygon sounds like the logical choice anyway.

Profiling path:

<svg xmlns="http://www.w3.org/2000/svg">
    <g id="paths"></g>

    <text x="20" y="20" id="out"></text>

    <script><![CDATA[
    var d = "M43.301270189221924,55 L43.301270189221924,65 L51.96152422706631,70 L60.6217782649107,65 L60.6217782649107,55 L51.96152422706631,50 Z";

    var paths = document.getElementById('paths');
    var path = document.createElementNS("http://www.w3.org/2000/svg", 'path');
    path.setAttribute('d', d);

    var start = new Date();
    for (var i = 0; i < 20000; i++)
    {
        var el = path.cloneNode(true);
        el.setAttribute('transform', 'translate(' + ((i * 20) % 1000) + ',' + ((i / 50) * 20) + ')');
        paths.appendChild(el);
    }

    setTimeout(function() {
        document.getElementById('out').textContent += 'Path: ' + (new Date() - start) + 'ms';
        // paths.parentNode.removeChild(paths);
    }, 10);

    ]]>
    </script>
</svg>

And the same thing for polygon:

<svg xmlns="http://www.w3.org/2000/svg">
    <g id="polygons"></g>

    <text x="20" y="20" id="out"></text>

    <script><![CDATA[
    var points = "43.301270189221924,55 43.301270189221924,65 51.96152422706631,70 60.6217782649107,65 60.6217782649107,55 51.96152422706631,50";

    var polygons = document.getElementById('polygons');
    var polygon = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
    polygon.setAttribute('points', points);

    var start = new Date();
    for (var i = 0; i < 20000; i++)
    {
        var el = polygon.cloneNode(true);
        el.setAttribute('transform', 'translate(' + ((i * 20) % 1000) + ',' + ((i / 50) * 20) + ')');
        polygons.appendChild(el);
    }

    setTimeout(function(){
        document.getElementById('out').textContent += 'Polygons: ' + (new Date() - start) + 'ms';
        // polygons.parentNode.removeChild(polygons);
    }, 10);

    ]]>
    </script>
</svg>

Ended up changing my comment to an answer...

I don't know very much about SVG detail-wise, but... I would assume the transformation itself would take the same amount of time, as it'd just be changing the values of the points stored in memory. Even if not, the additional "heaviness" would likely be vastly outweighed by the fact that rendering is what requires the most resources out of anything else. See http://en.wikipedia.org/wiki/File:10-simplex_t03.svg for an example with lots and lots of SVG elements.

Anyway, if it is the case that there's no significant performance difference, then I too would agree on going for the polygon tag, but not just because of semantics. It would prevent you from accidentally making the hexagon curvy, and the syntax is simpler.