svg performance

by suld2495

HTML

<!doctype html>
<html>
<body>
<svg id="svg" style="width:500px;height:500"></svg>
<script>
    let svg = document.getElementById('svg');
    let svgStr = "";

    console.time('Draw SVG');

    for (let i = 0; i < 500; i++) {
        for (let j = 0; j < 500; j++) {
            svgStr += `<rect style="fill:${getColor()}" width="1" height="1" x="${i}" y="${j}"></rect>`;
        }
    }

    svg.innerHTML = svgStr;

    setTimeout(() => {
        console.timeEnd('Draw SVG');
    })

    function getColor() {
        let accessible = 'abcdef123456789';
        let str = '';

        for (let i = 0; i < 6; i++) {
            str += accessible[Math.floor(Math.random() * accessible.length)];
        }

        return `#${str}`;
    }
</script>
</body>
</html>