Transform scale vs viewbox scale (v2)

Revision 2 of this benchmark created on

Description

Is scaling more performant using "currentScale". The answer is seems obviously yes although I'd argue that it is less useful. This test checks to see if that hypothesis holds.

Preparation HTML

<svg id="svg-guy" width="400" height="400" viewBox="0 0 400 400">
  <g id="toscale">
  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
  </g>
</svg>

Setup

window.svgGuy = document.getElementById('svg-guy');
    window.svgGuy.attributes.viewBox = '0 0 400 400';
    window.myscale = 1;
    window.factor = 0.80;
    
    window.toscale = document.getElementById('toscale');
    window.toscale.attributes.transform = 'scale(1)';

Test runner

Ready to run.

Testing in
TestOps/sec
Transform Scale
window.svgGuy.myscale *= window.factor;
window.toscale.attributes.transform = "scale("+window.svgGuy.myscale+")";
ready
Viewbox Scale
window.svgGuy.myscale *= window.factor;
var v =  (400 * window.svgGuy.myscale );
window.svgGuy.attributes.viewBox = '0 0 ' + v + ' ' + v;
ready

Revisions

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