Learn D3.js

SVG to Canvas and back

Optimization techniques that use Canvas, frequently convert objects from Canvas to SVG and vice-versa. Canvas is used in static parts or during expensive operations. When the user needs to interact with an object, the objects are converted back to SVG. The d3-path module includes the d3.path() function, which contains methods that have the same names as Canvas path methods, but generate SVG path strings. You can use them to write code that works the same in Canvas and SVG.

The following example (see Canvas/6-canvas-to-svg.html) uses d3.path() methods to draw the SVG shapes used in an example at the beginning of this chapter in Canvas or in SVG.

This example uses the d3-selection-multi module, which must be imported ...