Exported SVG

SVG export

This demo shows how to export the current view of the FoamTree visualization to the SVG format using the drawTo() method.

The drawTo() method draws the complete visualization to the Context2D you provide. There are a number of Context2D implementations, such as svgcanvas, that capture the drawing calls and expose the corresponding SVG elements.

What's in the code?

• When you press the Export to SVG button, this code instantiates the context provided by svgcanvas and calls the drawTo() method to get the SVG representation of the visualization.
• Before exporting, this code sets the groupLabelMinFontSize option to 0 to ensure that all labels are drawn.
• The Save the exported SVG link is a <a download> pointing at a Blob URL of the serialized SVG.

Limitations

• Gradient fills on zoomed viewports. The svgcanvas implementation materializes the hierarchy of context transformations directly into the coordinates of the SVG shapes it creates. This causes the incorrect rendering of gradients if the viewport is zoomed and/or panned.
• Custom group label fonts. If your visualization uses custom web fonts to draw group labels, to preserve the same font in the exported standalone SVG, you must post-process the SVG output to embed the custom font inside the SVG.