SVG transform

JavaScript performance comparison

Revision 4 of this test case created by Nathan Bingham


A slight modification to this test. I was trying to use the cached method in IE10 and needed to return the transform returned from the appendItem method, which appears to be different than the transform returned from the createSVGTransform method. This approach still appears to work in the latest Chrome (21.0.1180.79) and FF (14.0.1) at the time of creation.

Preparation code

        function createRect(y){
          var r = document.createElementNS(ns, 'rect');
          r.setAttribute('height', 10);
          r.setAttribute('width', 10);
          r.setAttribute('y', y);
          r.setAttribute('x', 10);
          r.setAttribute('stroke', '#000000');
          r.setAttribute('fill', '#007fff');
          return r;
        function createTransform(rect) {
                var t1 = rect.ownerSVGElement.createSVGTransform();
                var t2 = rect.transform.baseVal.appendItem(t1);
                return t2;

  var value = 42;
  var ns = "";
  var svg = document.createElementNS(ns, 'svg');
  var x = 0;
  var r1 = createRect(10);
  var r2 = createRect(50);
  var r3 = createRect(90);
  var r4 = createRect(130);

  var r2Transform = createTransform(r2);
  var r3Transform = createTransform(r3);
  var r4Transform = createTransform(r4);
  var r4Matrix = r4Transform.matrix;

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Set Transform String
x = (x+5) % 123;
r1.setAttribute("transform", "translate(" + x + " 0)");
Manipulate transform with API
x = (x+5) % 123;
r2.transform.baseVal.getItem(0).matrix.e = x;
Manipulate transform with cached transform
x = (x+5) % 123;
r3Transform.matrix.e = x

Compare results of other browsers


You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:


Add a comment