Proposals/GpuZoomPan
Smooth Zooming and Panning UX for SVG
Interactive zooming and panning UX by pinch in/out and dragging motion are very popular in modern browsers and apps. This UX requires high frame rate image generation independent on the number of elements, therefore today it is realized by such a complex technique using GPU (OpenGL). However, although key feature of SVG is "scaleble", the browser support for offering that UX to SVG apps/contents is poor.
At the following link, zooming and panning web apps for SVG contents are attempted by some methods. However, neither is so smooth. Basically, a frame rate falls in proportion to the number of graphics elements. Although there are the cases that a browser tries zooming and panning using GPU intelligently, they are awkward. It seems to be considerably difficult to completely handle it only by browsers's intelligence.
http://svg2.mbsrv.net/devinfo/devstd/panZoom/
Many are manually implementing pan/zoom functionality in SVG diagrams due to viewers not implementing the existing pan/zoom SVG standard features (which are implemented in some implementations such as Adobe's abandoned SVG plugin) In addition to providing faster methods for complex SVG diagrams, we should address whatever issues are keeping viewer/browser providers from implementing the existing pan/zoom features of SVG. --Smailus's input
On the other hand, in canvas, sufficiently smooth implementation is possible compared with it. Therefore, in order to offer UX of the interactive scalability by zooming and panning for SVG, there is even a case which draws svg contents on canvas using canvg etc. sadly.
In order to realize a high frame rate without being dependent on the number of graphics elements, the interface which is considered specially for interactive zooming and panning is required.
'suspendRedraw'
Deprecated 'suspendRedraw' was one of the suitable candidates for the solution.
mousedown 'supendRedraw' (Freeze drawing of the document and its descendant as a thing like a bit image.) mousemove Perform dynamic modification processing of the midst of interactive zooming and panning by changing contgainer's css transform attribute. (Freezed drawing thing offers processing of transformation (including zooming and panning) independent of the number of graphics primitives using GPU.) mouseup Edit viewBox of svg DOM into suitable values. Restore css transform to an initial state. 'unsuspendRedraw': Release freezing.
modification of 'suspendRedraw' for more convenience
If a cancellation condition of 'suspenRedraw' is changed as follows, coding of webApps with the smooth zooming and panning function will be possible more easily.
- 'suspendRedraw' is not cancelled even by a change of viewport.
- However, according to a change of viewport, zooming and pannning as the bit image are carried out, and the representation on screen changes.
mousedown 'supendRedraw' (Freeze drawing of the document and its descendant as a thing like a bit image.) mousemove Perform dynamic modification processing of the midst of interactive zooming and panning by changing viewBox attribute. (Freezed drawing thing offers processing of transformation (including zooming and panning) independent of the number of graphics primitives using GPU.) mouseup 'unsuspendRedraw': Release freezing.
Awkwardness will be canceled since the browser can know easily the timing which should use the zooming/panning mode by GPU by suspendRedraw/unsuspendRedraw.
So, I (stakagi) think that the restoring of suspendRedraw() modified in this way is desirable in order to make webApps by SVG practical.