Bundle requirements

API	Core	Extended
chart.exportImage()	✅	✅
chart.exportSVG()	❌ throws	trading, scientific, or full
createChart({ renderer: 'svg' })	❌	trading, scientific, or full
PluginSnapshot	—	velo-plot/plugins/snapshot or velo-plot/full
stack.exportImage()	—	velo-plot/trading or velo-plot/full
stack.exportSVG()	—	trading, scientific, or full

Image & Vector Export

Velo Plot supports raster (PNG, JPEG, WebP) and vector (SVG) export for single charts, plus composite stack export for multi-pane layouts.

Quick reference

API	Formats	Scope
createChart({ renderer: 'svg' })	Live SVG	Interactive vector chart (same API as WebGL)
chart.exportImage(type?)	png, jpeg	Single chart, screen DPR
chart.exportSVG()	SVG string	Single chart, full vector (series, axes, grid, legend, plugins)
chart.snapshot.takeSnapshot()	png, jpeg, webp, svg	Single chart, high-res + overlays
stack.exportImage() / stack.snapshot()	png, jpeg, webp, svg	Full stack layout (all panes)
stack.exportSVG()	SVG string	Full stack vector composite

---

Single chart — built-in raster

Synchronous export of the current WebGL + overlay canvas at the chart’s device pixel ratio:

const png = chart.exportImage('png');   // data:image/png;base64,...
const jpeg = chart.exportImage('jpeg'); // data:image/jpeg;base64,...

Use when you need a fast WYSIWYG capture without loading a plugin.

---

Single chart — SVG (vector)

Export series as vector paths with axis tick labels (not a raster embedded in SVG):

const svgString = chart.exportSVG({
  includeOverlays: true,
  includeLegend: true,
  includeAnnotations: true,
  includeCursor: false,
  ariaLabel: 'Electrochemical CV',
});

// Download in browser
const blob = new Blob([svgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'chart.svg';
link.click();
URL.revokeObjectURL(url);

SVG is ideal for publications, LaTeX documents, and lossless scaling.

Interactive SVG examples for every series type →

---

Live SVG renderer

Use renderer: 'svg' to draw the chart as a live vector layer instead of WebGL. Pan, zoom, plugins, and interactions work the same; each frame rebuilds SVG from the shared export pipeline.

import { createChart } from 'velo-plot/trading'

const chart = createChart({
  container: document.getElementById('chart')!,
  renderer: 'svg',
  showLegend: true, // interactive DOM legend (vector frame skips duplicate markup)
})

chart.addSeries({
  id: 'cv',
  type: 'line',
  data: { x, y },
  style: { color: '#00f2ff', width: 2 },
})

console.log(chart.getActiveRenderer()) // 'svg'

Topic	Notes
Bundle	Extended entry only (trading, scientific, full) — patches exportSVG used internally
3D	Not supported — use renderer: 'webgl' or 'webgpu'
Stack	Per-pane: chart: { renderer: 'svg' } in createStackedChart
Performance	Best for publication UIs and moderate point counts; use WebGL for millions of points
Export	chart.exportSVG() works on SVG and WebGL charts

See createChart renderer and the SVG examples gallery.

---

Single chart — Snapshot plugin (high-res)

Load PluginSnapshot for publication-quality raster export and unified SVG download:

import { createChart } from 'velo-plot/scientific';
import { PluginSnapshot } from 'velo-plot/plugins/snapshot';

const chart = createChart({ container });
chart.use(PluginSnapshot());

// Raster — returns data URL
const png4k = await chart.snapshot.takeSnapshot({
  format: 'png',
  resolution: '4k',
  includeOverlays: true,
  watermarkText: 'Lab Report 2026',
});

// SVG — returns raw SVG string
const svg = await chart.snapshot.takeSnapshot({ format: 'svg' });

// Auto-download any format
await chart.snapshot.downloadSnapshot({
  format: 'webp',
  quality: 0.92,
  resolution: '2k',
  fileName: 'experiment-42',
});

Snapshot options

Option	Type	Default	Description
format	'png' | 'jpeg' | 'webp' | 'svg'	'png'	Output format
resolution	'standard' | '2k' | '4k' | '8k' | number	'standard'	DPR scale multiplier (raster only)
quality	number	0.9	JPEG/WebP compression (0–1)
includeBackground	boolean	true	Fill with theme background
includeOverlays	boolean	true	Annotations, tooltips on overlay canvas
transparent	boolean	false	Transparent background (PNG/WebP)
watermarkText	string	''	Optional watermark
fileName	string	'velo-plot-snapshot-export'	Download filename
download	boolean	false	Trigger browser download

Resolution presets

Preset	Scale	Typical use
standard	1×	Screen resolution
2k	2×	Retina / slides
4k	4×	Print / posters
8k	8×	Publication figures

---

Multi-pane stack export

createStackedChart composes every pane at its on-screen layout position into one image:

import { createStackedChart } from 'velo-plot/trading';

const stack = createStackedChart({
  container,
  panes: [/* price, volume, rsi, ... */],
});

await stack.whenReady();

// Data URL
const png = await stack.exportImage({ format: 'png', resolution: '4k' });

// Download
await stack.snapshot({
  format: 'jpeg',
  quality: 0.9,
  download: true,
  fileName: 'market-stack',
  includeDividers: true,
});

Stack export options

Option	Type	Default	Description
format	'png' | 'jpeg' | 'webp' | 'svg'	'png'	Output format
resolution	'standard' | '2k' | '4k' | '8k' | number	'standard'	DPR scale multiplier
quality	number	0.92	JPEG/WebP quality
includeBackground	boolean	true	Theme background fill
includeDividers	boolean	true	Resize dividers in export
transparent	boolean	false	Transparent background
download	boolean	false	Auto-download
fileName	string	'velo-plot-stack'	Download filename

Stack SVG

Use stack.exportSVG() for a single vector document with all panes, or stack.snapshot({ format: 'svg' }) for the same output with optional download.

const svg = stack.exportSVG({ includeDividers: true, includeAnnotations: true });

await stack.snapshot({ format: 'svg', download: true, fileName: 'market-stack' });

Works for vertical and horizontal (direction: 'horizontal') stacks.

---

Format comparison

Format	Type	Best for	Plugin required
PNG	Raster	Screenshots, slides, transparency	Built-in or Snapshot
JPEG	Raster	Photos, smaller file size	Built-in or Snapshot
WebP	Raster	Modern browsers, good compression	Snapshot
SVG	Vector	Papers, Inkscape, infinite zoom	Built-in or Snapshot
Stack PNG/JPEG/WebP/SVG	Raster / Vector	TradingView-style multi-pane figures	Built-in on StackedChart

---

React example

import { useRef } from 'react';
import { VeloPlot } from 'velo-plot/react';
import { PluginSnapshot } from 'velo-plot/plugins/snapshot';

function ExportableChart() {
  const ref = useRef(null);

  const exportPng = async () => {
    const chart = ref.current?.getChart();
    if (!chart?.snapshot) return;
    await chart.snapshot.downloadSnapshot({ format: 'png', resolution: '4k' });
  };

  const exportSvg = () => {
    const chart = ref.current?.getChart();
    if (!chart) return;
    const svg = chart.exportSVG();
    // ... blob download as above
  };

  return (
    <>
      <VeloPlot ref={ref} onReady={(c) => c.use(PluginSnapshot())} series={[...]} />
      <button onClick={exportPng}>PNG 4K</button>
      <button onClick={exportSvg}>SVG</button>
    </>
  );
}

---

See also

• Export & Media Plugins — Snapshot, Video Recorder, Data Export
• Data Export (CSV/JSON) — Raw series data
• Stacked Chart API — Multi-pane layout export
• Export examples — Interactive demos

Known limitations

• stack.exportSVG() and renderer: 'svg' require extended bundle. LaTeX/contour partial in SVG; 3D not supported.
• Per-chart exportSVG() throws on core-only — see SVG examples.