Why svg-pan-zoom uses transform over a <g> element?

[bumbu]

Victor Rizea sent me an email with following question:

I have a question about the method that is used in that project to achieve svg navigation.

The chosen method is to apply transforms to the root svg. However there are other alternatives. There is one in particular and that is to use the svg viewBox for navigation.

My question is this -> Is there any particular reason for why the the transforms method was chosen over the viewBox method ?

I'm sure that other people may have the same question. So I decided to answer it here so that we could discuss it publicly.

[bumbu]

This functionality has roots in the original library.

However it still seems to be a good choice because:

• From what I know there were problems with viewBox attribute in IE<9. So it's understandable why an alternative was used. Currently this library supports IE9, but anyway viewBox still has problems.
• Transform attribute is applied to a <g> (group) element (and not to the <svg> element). This meaning that it is possible to have one pan-zoomable group, and one or more static groups. You can see an example of this in any demo with enabled controls. It would be a hassle to update controls position and zoom if we would use viewBox for zoom and pan.
• It is implemented, tested and it works. I suppose that it is possible to have a good enough version that uses viewBox, but it requires someones effort. And currently it seems that there is no-one who's willing to dedicate time for that. But you're more then welcome to research that and in case of success to share it with the community via a pull-request.

Maybe @ariutta has some more comments on that.

[ariutta]

It's a fair question that I asked as well. That issue links to a good demo of a viewBox solution, if anyone is interested.

@bumbu has the right answer -- initially used our current method because it was how the original library did it. We kept it because this method gives us more control, as @bumbu describes. But for simple use cases, the viewBox solution is a valid alternative. And if you use a "parent" SVG with nested child SVGs, you could even have layers with separate pan/zoom behavior.

I wish I had time to test how GPU acceleration relates to pan/zoom via CSS transform vs viewBox. I know some browsers use acceleration for at least some CSS transforms, but the only thing I've heard about it with regard to the viewBox was this:
http://www.w3.org/2013/11/15-svg-minutes.html#item08

[piemanvik]

Yeah the fact that they have decided to remove those redraw control methods suspend/unsuspend was really .. well I just wanted to throw my pc out the window when they did that. But I understand their reasoning (http://dschulze.com/blog/articles/4/efficient-redrawing-on-svg-or-why-suspendredraw-is-a-lie) to some degree .. although they could have made them optional.

Anyway, are svg-transforms the same thing as CSS transforms are they based in the same ecosystem ?
(yes I have also seen CSS transform based implementations that seemed to give better fps but I am not a big fan of such approach due to the volatile nature of CSS)

I will do some tests with the svg-pan-zoom library to see how it fares with very big scenes.

Thanks

[ariutta]

I think the syntax for CSS and SVG transform matrices is supposed to be the
same but may possibly be implemented differently by browsers.
On Sep 7, 2015 4:12 PM, "Victor Rizea" notifications@github.com wrote:

Yeah the fact that they have decided to remove those redraw control
methods suspend/unsuspend was really .. well I just wanted to throw my pc
out the window when they did that. But I understand their reasoning (
http://dschulze.com/blog/articles/4/efficient-redrawing-on-svg-or-why-suspendredraw-is-a-lie)
to some degree .. although they could have made them optional.

Anyway, are svg-transforms the same thing as CSS transforms are they based
in the same ecosystem ?

I will do some tests with the svg-pan-zoom library to see how it fares
with very big scenes.

Thanks

—
Reply to this email directly or view it on GitHub
#147 (comment)
.

[Llbe]

Check this out: http://xn--dahlstrm-t4a.net/svg/performance/view-animation/harness.html

Click to toggle method between a translate(), viewBox and currentTranslate.

[bumbu]

I tested this on few different machines and different browsers and the results were quite similar (deviation of 1-2 frames per second). And it seems that on modern mobile browsers it is the same.

Does anyone else get the same results of something different?

[bumbu]

I suppose this question was answered. If it is necessary - we can reopen it.
@Llbe - thank you for your example.