Benchmark: Setting SVG transform attribute

HTML Preparation code:

<svg id="svg"><g id="node"/></svg>

Script Preparation code:

const node = document.getElementById('node');
const svg = document.getElementById('svg');
const matrix = svg.createSVGMatrix();
matrix.a = 2;
matrix.d = 2;

function matrixToTransformString(matrix) {
    return `matrix(${matrix.a}, ${matrix.b}, ${matrix.c}, ${matrix.d}, ${matrix.e}, ${matrix.f})`;
}

Tests:

el.setAttribute
node.setAttribute('transform', matrixToTransformString(matrix));
el.transform.baseVal.appendItem
const transform = svg.createSVGTransform(); transform.setMatrix(matrix); const transformList = node.transform.baseVal; if (transformList.numberOfItems > 0) { transformList.clear(); } transformList.appendItem(transform);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
el.setAttribute
el.transform.baseVal.appendItem

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
el.setAttribute	2867389.0 Ops/sec
el.transform.baseVal.appendItem	3480188.8 Ops/sec

Related benchmarks:

Setting SVG transform attribute (version: 1)

Use SVGTransform API vs setAttribute()

Comparing performance of: el.setAttribute vs el.transform.baseVal.appendItem

Created: one year ago by: Registered User

Jump to the latest result

el.setAttribute

el.transform.baseVal.appendItem

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A