{"id":10609,"library":"canvg","title":"SVG Parser and Renderer for Canvas","description":"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.","status":"active","version":"4.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/canvg/canvg","tags":["javascript","client","browser","svg","canvas","typescript"],"install":[{"cmd":"npm install canvg","lang":"bash","label":"npm"},{"cmd":"yarn add canvg","lang":"bash","label":"yarn"},{"cmd":"pnpm add canvg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for XML parsing in Node.js environments; replaced `xmldom` in v4.0.2.","package":"@xmldom/xmldom","optional":true},{"reason":"Peer dependency for server-side rendering (Node.js) to provide a Canvas implementation. Required for `preset.createCanvas`.","package":"canvas","optional":true},{"reason":"Peer dependency for server-side rendering (Node.js) to provide a DOM environment, particularly for versions pre-v4.","package":"jsdom","optional":true},{"reason":"Required for fetching external SVG resources (e.g., from URLs) in Node.js environments.","package":"node-fetch","optional":true}],"imports":[{"note":"Since v4.0.0, Canvg is a named export. Previously, it was the default export.","wrong":"import Canvg from 'canvg'","symbol":"Canvg","correct":"import { Canvg } from 'canvg'"},{"note":"The 'presets' object containing environment-specific configurations (like 'node' or 'offscreen') is a named export from the main 'canvg' package.","wrong":"import { node, offscreen } from 'canvg/presets'","symbol":"presets","correct":"import { presets } from 'canvg'"},{"note":"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'.","wrong":"const Canvg = require('canvg')","symbol":"Canvg","correct":"const { Canvg } = require('canvg')"}],"quickstart":{"code":"import { promises as fs } from 'fs';\nimport { DOMParser } from '@xmldom/xmldom';\nimport { createCanvas } from 'canvas';\nimport fetch from 'node-fetch';\nimport { Canvg, presets } from 'canvg';\n\nconst preset = presets.node({\n    DOMParser,\n    canvas: { createCanvas },\n    fetch\n});\n\n(async () => {\n    const svgString = `\n        <svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"10\" y=\"10\" width=\"180\" height=\"180\" fill=\"#ff0000\" />\n            <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#0000ff\" />\n            <text x=\"50\" y=\"110\" font-family=\"Arial\" font-size=\"24\" fill=\"white\">Hello Canvg!</text>\n        </svg>\n    `;\n    const outputFilePath = process.env.OUTPUT_PATH ?? 'output.png';\n\n    const canvasInstance = preset.createCanvas(200, 200);\n    const ctx = canvasInstance.getContext('2d');\n\n    const v = Canvg.fromString(ctx, svgString, preset);\n\n    // Render only first frame, ignoring animations.\n    await v.render();\n\n    const pngBuffer = canvasInstance.toBuffer();\n\n    await fs.writeFile(outputFilePath, pngBuffer);\n    console.log(`SVG rendered to ${outputFilePath}`);\n})().catch(console.error);\n","lang":"typescript","description":"This Node.js example demonstrates how to parse an SVG string and render it to a PNG file using `canvg` with the `node` preset."},"warnings":[{"fix":"Change `import Canvg from 'canvg'` to `import { Canvg } from 'canvg'`.","message":"Since v4.0.0, the `Canvg` class is no longer the default export. It must now be imported as a named export.","severity":"breaking","affected_versions":">=4.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.","message":"Version 4.0.0 dropped UMD bundle support and compatibility with older browsers. Node.js environments now require Node.js >=12.0.0.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Update your TypeScript version to 4 or higher in your project's `devDependencies`.","message":"TypeScript 4 is now a minimum requirement for projects using `canvg` v4.0.0 and above.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Install required peer dependencies manually: `npm i canvas @xmldom/xmldom node-fetch`.","message":"For 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.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade to `canvg@4.0.3` or `canvg@3.0.11` (or newer patch versions) immediately.","message":"A 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.","severity":"gotcha","affected_versions":"<4.0.3, <3.0.11"},{"fix":"If providing `DOMParser` for Node.js, ensure you import it from `'@xmldom/xmldom'` instead of `'xmldom'`.","message":"The 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.","severity":"gotcha","affected_versions":">=4.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import Canvg from 'canvg'` to `import { Canvg } from 'canvg'`.","cause":"Attempting to instantiate `Canvg` as a default import after v4.0.0's breaking change.","error":"TypeError: canvg__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor"},{"fix":"For Node.js, pass a `DOMParser` instance (e.g., from `@xmldom/xmldom`) via the `presets.node` configuration: `presets.node({ DOMParser })`.","cause":"Attempting to use `canvg.fromString` or related methods in Node.js without providing a DOMParser implementation.","error":"ReferenceError: DOMParser is not defined"},{"fix":"For Node.js, pass the `canvas` library (e.g., from `canvas` npm package) via `presets.node` configuration: `presets.node({ canvas })`.","cause":"Attempting to use `presets.node().createCanvas` in Node.js without providing a `canvas` library implementation.","error":"ReferenceError: createCanvas is not defined"},{"fix":"For Node.js, provide a `fetch` polyfill (e.g., `node-fetch`) via the `presets.node` configuration: `presets.node({ fetch })`.","cause":"Attempting to fetch external SVG resources (e.g., using `Canvg.from(ctx, url)`) in Node.js without a global `fetch` or custom `fetch` implementation.","error":"ReferenceError: fetch is not defined"}],"ecosystem":"npm"}