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

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.

Reference

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.

drawWindow

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

drawWindow() which can be used only as an add-on is offered in Firefox.
It seems that Google chrome also has a similar function.

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.

<html>
  <canvas id="cv" style="display:none"/>
  <svg id="mainMap">
    ...
    <path.../>
    <iframe.../>
    ...
  </svg>
</html>

m_cv = document.getElementById( "cv" );
m_MainMap = document.getElementById( "mainMap" );
m_image = new Image();
m_image.createSVGImage(m_MainMap);

{ // 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.

Related

Reference

Existing implementation

Canvas drawImage(svg)

drawWindow

Experimental implementation for webkit from KDDI