| Number | content structure | Panning Method | svg content size | comment:Firefox(24.0,27.0.1) | comment:Firefox(28.0) | comment:Chrome(30.0.1599.101, 33.0.1750.154) | InternetExplorer(10.0.10, 11.0.4) |
|---|---|---|---|---|---|---|---|
| 1 | div/img(svg) | css translate3d to div | 2MB | It stumbles just after "every" mouse down. Subsequently, it shows smooth panning. | good! | It stumbles just after "first" mouse down after document load. Subsequently, it shows smooth panning. | Low frame rate |
| 2 | div/img(svg) | css translate3d to div | 8MB | It stumbles more just after "every" mouse down. | good! | It shows the same behaviors as 1 including smoothness. | Low frame rate |
| 3 | div/img(svg) | css translate to div | 2MB | It shows the same behaviors as 1. | good! | Low frame rate | Low frame rate |
| 4 | div/img(svg) | css translate to div | 8MB | It shows the same behaviors as 2 | good! | More low frame rate | Low frame rate |
| 5 | div/object(svg) | css translate3d to div | 2MB | It shows the same behaviors as 1 (expect for svg object is not hittable). | -- | It shows the same behaviors as 1 (expect for svg object is not hittable). | -- |
| 6 | img(svg) | css translate3d to img | 2MB | It shows the same behaviors as 1 (expect for svg object is not hittable). | good! | It shows the same behaviors as 1 | Low frame rate |
| 7 | div/inlineSVG | css translate3d to div | 2MB | Low frame rate | Same as <= | It shows the same behaviors as 1 | Low frame rate |
| 8 | inlineSVG | css translate3d to inlineSVG | 2MB | Low frame rate | Same as <== | It shows the same behaviors as 1 expect for the afterimage of an compensation domain. | Low frame rate |
| 9 | inlineSVG/svg:image(svg) | css translate3d to inlineSVG | 2MB | Low frame rate | good! | It shows the same behaviors as 1 expect for the afterimage of an compensation domain. | Low frame rate |
| 10 | inlineSVG/svg:image(svg) | svg:viewBox | 2MB | It shows the same behaviors as 1 | good! | Low frame rate | Low frame rate |
| 11 | inlineSVG/svg:image(svg) | svg:viewBox | 8MB | ^ | ^ | ^ | ^ |
| 12 | inlineSVG | svg:viewBox | 2MB | More low frame rate | Same as <== | Low frame rate | Low frame rate. Not proper clipping. |
| 13 | inlineSVG | svg:viewBox | 8MB | Same as 12 | ^ | ||
| 14 | CSS background image SVG | css:backgroundPosition | 2MB | Low frame rate | It stumbles just after "first" mouse down after document load. Subsequently, it shows smooth panning. | Low frame rate | Most smooth panning |
| 15 | SVG is drawn on canvas using discrete javascript logic. | css transform to canvas | 2MB | At every browsers, the start of panning is quick and its frame rate of the midst of pannnig is also high. However, the re-rendering after the end of panning by discrete logic is somewhat heavy. Since the browser native processing of SVG should be carried out (for animation interactivity etc.), this is only stopgap implementation. | |||
| 16 | Same as 15 | Same as 15 | 8MB | Same as 15. Re-rendering is more heavy. | |||
| Number | content structure | Zooming Method | svg content size | comment:Firefox(24.0-27.0.1) | Firefox(28.0-31.0(windows)) | comment:Chrome(30.0.1599.101, 33.0.1750.154, 36.0.1985.125 windows),(36.0.1985.131 nexus7 android) | InternetExplorer(10.0.10, 11.0.4, 11.0.9600) |
|---|---|---|---|---|---|---|---|
| 21 | div/img(svg) | css scale3d to div | 2MB | It stumbles just after "every" mouse down. Subsequently, it shows smooth zooming. But it may stumble during zooming (dragging) irregularly. Stretched image quality is as good as expected. | Same as <== | It stumbles just after "first" mouse down after document load. Subsequently, it shows smooth zooming. However, stretched image quality is disappointing as vector graphics. | Low frame rate |
| 21b | div/object(svg) | css scale3d to div event is captured from embedded svg document | 2MB | It stumbles just after "every" mouse down. Subsequently, it shows smooth zooming. But it may stumble during zooming (dragging) irregularly. Stretched image quality is as good as expected. The acquisition of an event itself is awkward. | Same as <== | It stumbles just after "first" mouse down after document load. Subsequently, it shows smooth zooming. However, stretched image quality is disappointing as vector graphics. Furthermore, image quality becomes good, when you push the 'Change Color' button, only immediately after the expanded picture became larger than the bottom or a right end of a window. However, image quality deteriorates, after performing zoom again. And, when the expanded picture is not larger than the bottom or a right end of a window, even if the Change Color button is pushed, image quality does not change. The acquisition of an event itself is awkward. | Low frame rate |
| 21c | div/object(svg) | css scale3d to div event is captured from document (you shoud zoom by clicking outer of the picture.) | 2MB | It stumbles just after "every" mouse down. Subsequently, it shows smooth zooming. But it may stumble during zooming (dragging) irregularly. Stretched image quality is as good as expected. | Same as <== | It stumbles just after "first" mouse down after document load. Subsequently, it shows smooth zooming. However, stretched image quality is disappointing as vector graphics. Furthermore, image quality becomes good, when you push the 'Change Color' button, only immediately after the expanded picture became larger than the bottom or a right end of a window. However, image quality deteriorates, after performing zoom again. And, when the expanded picture is not larger than the bottom or a right end of a window, even if the Change Color button is pushed, image quality does not change. | Low frame rate |
| 22 | div/img(svg) | css scale3d to div | 8MB | Same as 21 | Same as <== | It shows the same behaviors as 21 including smoothness. | Low frame rate |
| 23 | div/img(svg) | css zoom to div | 2MB | It shows the same behaviors as 21. | Same as <== | Low frame rate but stretched image quality is good. | |
| 23b | div/img(svg) | css zoom (after zoom), scale3d (during zooming) to div | 2MB | It shows the same behaviors as 21. | Same as <== | After zoom, image quality is good. However image quality is too poor during zooming. And it stumbles just after "every" mouse down. | |
| 24 | inlineSVG/svg:image(svg) | svg:viewBox | 2MB | It shows the same behaviors as 21 | Same as <== | Low frame rate | Low frame rate. Not proper clipping. |
| 25 Zoom:Right-click drag | SVG is drawn on canvas using discrete javascript logic. | css transform to canvas | 2MB | Same as 15 | |||
| 26 Zoom:Right-click drag | Same as 15 | Same as 15 | 8MB | Same as 16 | |||
| 27 | div/img(svg) | css matrix to div | 2MB | Same as 23 | Same as <== | It shows the same behaviors as 23. | Low frame rate |
| 28 | div/img(svg) | css matrix3d to div | 2MB | Same as 21 | Same as <== | It shows the same behaviors as 21. | Low frame rate |
| 29 | div/img(svg) | css scale3d to div initially translate3d(0px,0px,0.1px)is applied | 8MB | - not tested - | Different from 22, There is no stumble just after a mouse down. However, there is still stumbles during zooming animation. | Different from 22, There is no stumble just after a mouse down. However, there is degradation of the display quality after expansion like 22. | Low frame rate |
| 30 | div/object(svg) | css scale3d to div initially translate3d(0px,0px,0.1px)is applied event is captured from document (you shoud zoom by clicking outer of the picture.) | 2MB | - not tested - | It shows the same behaviors as 29. | It shows the same behaviors as 29. | Low frame rate |