Question

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.6217782649107,55L51.96152422706631,50Z"></path>

Answer 1

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>