F2F/Sydney 2013/Agenda/Performances to transition in zooming and panning

From SVG
< F2F‎ | Sydney 2013‎ | Agenda
Jump to: navigation, search

Zooming and a panning are also not only the fundamental functions for mapping, but the important function to utilize the features of svg. In today's panning and zooming user interface, interactive animation is offered in the transition state. Although this requires a high frame rate, a vast quantity of graphics primitives make it difficult. With mapping, such a situation often arises.

According to the last f2f discussion , there is an opinion that it should be realized by sending svg to canvas at transition state.

Then, I investigate about the method.


ACTION-3371 : performances to transition in zooming and panning


According to SVGOPEN2010 'From SVG to Canvas and Back', the interface between svg and canvas was considered.

Existing implementation

Canvas drawImage(svg)

Above paper introduces the methods of sending svg dom to canvas by the existing implementation. This method is combination of xml serialization of svg dom, base64 encoding, an input to Image.src which uses the data: uri scheme and the drawing to canvas.

function importSVG(sourceSVG, targetCanvas) {
   // https://developer.mozilla.org/en/XMLSerializer
   var svg_xml = (new XMLSerializer()).serializeToString(sourceSVG);
   var ctx = targetCanvas.getContext('2d');

   // this is just a JavaScript (HTML) image
   var img = new Image();
   // http://en.wikipedia.org/wiki/SVG#Native_support
   // https://developer.mozilla.org/en/DOM/window.btoa
   img.src = "data:image/svg+xml;base64," + btoa(svg_xml);

   img.onload = function() {
       // after this, Canvas’ origin-clean is DIRTY
       ctx.drawImage(img, 0, 0);

Security consideration : canvas generated in this way cannot getImageData.

In this paper, it is pointed out that this method is a considerably roundabout method. And the paper has advocated SVG.toDataURL() API and even more direct conversion API.

And, cascading images of referred resources by iframe etc. is not obtained.


The function which carries out the capture of the rendered image will be the one method for that.

Experimental implementation for webkit from KDDI

The function which assigns the rendering target of SVG object to a canvas.

Image createSVGImage(SVGSVGElement)

renders SVG to image once.

  <canvas id="cv" style="display:none"/>
  <svg id="mainMap">
m_cv = document.getElementById( "cv" );
m_MainMap = document.getElementById( "mainMap" );
m_image = new Image();

{ // enter zoom&pan transition
  m_MainMap.style.display = "none";
  m_cv.style.display = "block";
  { // transition animation
    m_ctx = m_cv.getContext('2d');
    m_ctx.drawImage(m_image, animX, animY, animW, animH);
  m_cv.style.display = "none";
  m_MainMap.style.display = "block";
} // exit transition

issues: The treatment of animated dynamic svg by such as 'animation' is uncertain.