SVG append via DOMParser() vs createElement - One element

Benchmark created by Alexis Deveria on

Description

Compare ways of adding new SVG content

Preparation HTML

<script>
  var ns = "http://www.w3.org/2000/svg";
  var svg = document.createElementNS(ns, 'svg');
  document.body.appendChild(svg);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
DOMParser()
var r1 = new DOMParser().parseFromString('<svg  xmlns="' + ns + '"><rect id="svg_7" height="53" width="69" y="31" x="77" stroke="#000000" fill="#007fff"/></svg>', 'text/xml');

svg.appendChild(document.importNode(r1.documentElement.firstChild, true));
ready
createElementNS
var r1 = document.createElementNS(ns, 'rect');
r1.id = 'svg_7';
r1.setAttribute('height', 53);
r1.setAttribute('width', 69);
r1.setAttribute('y', 31);
r1.setAttribute('x', 77);
r1.setAttribute('stroke', '#000000');
r1.setAttribute('fill', '#007fff');
svg.appendChild(r1);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.