canvg

library4.0.3jsnpmunverified

canvg is a JavaScript library designed to parse SVG files and render them onto an HTML Canvas element. It handles various SVG features, animations, and interactions, making it suitable for displaying vector graphics in environments where direct SVG rendering might not be feasible or desired. The current stable version is 4.0.3, with recent releases addressing bug fixes and dependency updates. The project appears to have an active release cadence, with multiple minor and patch releases within major versions. A key differentiator is its versatility, supporting rendering in standard browser environments, Web Workers via OffscreenCanvas, and Node.js environments, requiring appropriate polyfills or peer dependencies for server-side rendering. It provides a programmatic API to load SVG content from URLs or strings and control its rendering lifecycle.

serialization

npm install canvg

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · CANVG

canvg

serializationjavascriptv4.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Canvg

✓ import { Canvg } from 'canvg'

✗ import Canvg from 'canvg'

Since v4.0.0, Canvg is a named export. Previously, it was the default export.

presets

✓ import { presets } from 'canvg'

✗ import { node, offscreen } from 'canvg/presets'

The 'presets' object containing environment-specific configurations (like 'node' or 'offscreen') is a named export from the main 'canvg' package.

Canvg

✓ const { Canvg } = require('canvg')

✗ const Canvg = require('canvg')

While CommonJS is still supported, ESM is the primary module system. The default export was removed in v4, so CommonJS users should also use destructuring for 'Canvg'.

This Node.js example demonstrates how to parse an SVG string and render it to a PNG file using `canvg` with the `node` preset.

import { promises as fs } from 'fs'; import { DOMParser } from '@xmldom/xmldom'; import { createCanvas } from 'canvas'; import fetch from 'node-fetch'; import { Canvg, presets } from 'canvg'; const preset = presets.node({ DOMParser, canvas: { createCanvas }, fetch }); (async () => { const svgString = ` <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="180" height="180" fill="#ff0000" /> <circle cx="100" cy="100" r="80" fill="#0000ff" /> <text x="50" y="110" font-family="Arial" font-size="24" fill="white">Hello Canvg!</text> </svg> `; const outputFilePath = process.env.OUTPUT_PATH ?? 'output.png'; const canvasInstance = preset.createCanvas(200, 200); const ctx = canvasInstance.getContext('2d'); const v = Canvg.fromString(ctx, svgString, preset); // Render only first frame, ignoring animations. await v.render(); const pngBuffer = canvasInstance.toBuffer(); await fs.writeFile(outputFilePath, pngBuffer); console.log(`SVG rendered to ${outputFilePath}`); })().catch(console.error);

Debug

Known issues

breakingSince v4.0.0, the `Canvg` class is no longer the default export. It must now be imported as a named export.

fix

Change `import Canvg from 'canvg'` to `import { Canvg } from 'canvg'`.

affects: >=4.0.0

breakingVersion 4.0.0 dropped UMD bundle support and compatibility with older browsers. Node.js environments now require Node.js >=12.0.0.

fix

Ensure your Node.js runtime is version 12 or newer. For browser usage, ensure you are using a modern browser that supports ES modules.

affects: >=4.0.0

breakingTypeScript 4 is now a minimum requirement for projects using `canvg` v4.0.0 and above.

fix

Update your TypeScript version to 4 or higher in your project's `devDependencies`.

affects: >=4.0.0

breakingFor server-side rendering (Node.js), `canvg` v2.0.0 introduced peer dependencies like `canvas`, `jsdom`, and `xmldom` (later `@xmldom/xmldom`). These must be installed separately.

fix

Install required peer dependencies manually: `npm i canvas @xmldom/xmldom node-fetch`.

affects: >=2.0.0

gotchaA prototype pollution vulnerability was fixed in v3.0.11 and subsequently in v4.0.3. Ensure you are on a patched version to mitigate this security risk.

fix

Upgrade to `canvg@4.0.3` or `canvg@3.0.11` (or newer patch versions) immediately.

affects: <4.0.3, <3.0.11

gotchaThe internal dependency `xmldom` was replaced with `@xmldom/xmldom` in v4.0.2 to address maintenance issues and improve compatibility. If you were manually configuring `xmldom`, adjust to the new package.

fix

If providing `DOMParser` for Node.js, ensure you import it from `'@xmldom/xmldom'` instead of `'xmldom'`.

affects: >=4.0.2

Errors

Common errors & fixes

TypeError: canvg__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor

Attempting to instantiate `Canvg` as a default import after v4.0.0's breaking change.

fix

Change your import statement from `import Canvg from 'canvg'` to `import { Canvg } from 'canvg'`.

ReferenceError: DOMParser is not defined

Attempting to use `canvg.fromString` or related methods in Node.js without providing a DOMParser implementation.

fix

For Node.js, pass a `DOMParser` instance (e.g., from `@xmldom/xmldom`) via the `presets.node` configuration: `presets.node({ DOMParser })`.

ReferenceError: createCanvas is not defined

Attempting to use `presets.node().createCanvas` in Node.js without providing a `canvas` library implementation.

fix

For Node.js, pass the `canvas` library (e.g., from `canvas` npm package) via `presets.node` configuration: `presets.node({ canvas })`.

ReferenceError: fetch is not defined

Attempting to fetch external SVG resources (e.g., using `Canvg.from(ctx, url)`) in Node.js without a global `fetch` or custom `fetch` implementation.

fix

For Node.js, provide a `fetch` polyfill (e.g., `node-fetch`) via the `presets.node` configuration: `presets.node({ fetch })`.

Upgrade

Version history

4.0.3latest on npm

Audit

Dependencies

@xmldom/xmldomoptionalRequired for XML parsing in Node.js environments; replaced `xmldom` in v4.0.2.

canvasoptionalPeer dependency for server-side rendering (Node.js) to provide a Canvas implementation. Required for `preset.createCanvas`.

jsdomoptionalPeer dependency for server-side rendering (Node.js) to provide a DOM environment, particularly for versions pre-v4.

node-fetchoptionalRequired for fetching external SVG resources (e.g., from URLs) in Node.js environments.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/canvg/canvg ↗

packagehttps://www.npmjs.com/package/canvg ↗

homepagehttps://canvg.js.org ↗