How-To Recipe

Export a chart as SVG or PNG

Capture the complete chart component, including the HTML around canvas or SVG chart output.

TL;DR

Select the chart wrapper—not only its canvas—and call snapdom.toSvg(wrapper).

Copy-paste example

Install @zumer/snapdom, select the rendered element, and capture it:

import { snapdom } from '@zumer/snapdom'

const chart = document.querySelector('.chart-card')
const svgImage = await snapdom.toSvg(chart, { embedFonts: true })
document.querySelector('#preview').appendChild(svgImage)

Why this pattern works

Capturing the wrapper includes HTML legends, titles, filters and annotations that a chart library’s own exporter may omit.

Export a complete chart card

The capture includes the title, HTML legend and chart—not only the plot.

Revenue by channel

● Organic ● Paid

The captured result will appear here.

Limits and common mistakes

A canvas-based chart remains raster content inside the SVG capture. For editable vector paths, prefer the chart library’s native SVG renderer and exporter.

Frequently asked questions

Will a canvas chart become vector paths?

No. SnapDOM preserves its visual output but does not reconstruct canvas pixels as SVG geometry.

When should I export PNG?

Use PNG for broad portability or when the chart contains raster content and no scalable wrapper is needed.

Capture it in the browser

Install SnapDOM and turn the DOM your users already see into a portable image.

Open the demo Install from npm