Which is lighter: polygon or 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.