What is the best approach for SVG zooming ? Transform scale or viewbox?

Question

I have created code to zoom my SVG area when I double-click on the area. I used the transform scale attribute to achive this, multiplying the current scale by a factor ( such as 1.2 to give 20% of zooming ).

I can do the same acting on the viewbox attribute's 2nd and 3rd parameter. Decreasing them will cause the area elements to zoom, and vice versa.

Any observations on pros and cons of these two different approaches ?

Answer 1

I think viewbox is actually going to be faster in a real world application while a performance bench mark will indicate the opposite information.

Somewhat science'esq time:

I created a jsPerf: http://jsperf.com/transform-scale-vs-viewbox-scale

jsPerf seems to give me incorrect numbers for how long the tests took therefore skewing the results, but this much is certain: the code for the transform test is shorter, has 0 string manipulations and ran more times in less time.

• Transform Scale: ran 150k times
• ViewBox Modification: 90k times

Clearly, transform scale is faster. The code looks faster, the test is broken but observing the test runs indicates more runs for transform. However, I still have a feeling viewbox is faster in a real world application.

Why?

1. In either case, I want to store a separate object indicating the current state of my viewbox. This separate object is useful for updating a range slider or some indicator of current zoom level. Writing to the viewbox is easy after computing this.
2. Panning still needs to touch the DOM.
3. Often while zooming you also need to pan to recenter, which means you need to mess with viewbox anyways.
4. It won't actually impact performance because you can perform so many of those operations per second.

Conclusion: computers are fast; use viewbox; its less work; optimizing here is probably not going to give you huge gains in performance.