# canvg

> JavaScript SVG parser and renderer on Canvas.

Latest version **4.0.3** (published 2025-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install canvg
pnpm add canvg
yarn add canvg
bun add canvg
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 4.0.3 |
| Published | 2025-03-12 |
| First published | 2012-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12.0.0 |
| Dependencies | 5 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3835 |
| Author | Gabe Lerner |
| Maintainers | dangreen, gabelerner |
| Keywords | javascript, client, browser, svg, canvas |

## Links

- npm: https://www.npmjs.com/package/canvg
- Repository: https://github.com/canvg/canvg
- Homepage: https://github.com/canvg/canvg#readme
- Issues: https://github.com/canvg/canvg/issues
- npm.io page: https://npm.io/package/canvg

## Dependencies (5)

- [raf](https://npm.io/package/raf.md) ^3.4.1
- [rgbcolor](https://npm.io/package/rgbcolor.md) ^1.0.1
- [@types/raf](https://npm.io/package/@types/raf.md) ^3.4.0
- [svg-pathdata](https://npm.io/package/svg-pathdata.md) ^6.0.3
- [stackblur-canvas](https://npm.io/package/stackblur-canvas.md) ^2.0.0

## Alternatives

- [launchdarkly-js-client-sdk](https://npm.io/package/launchdarkly-js-client-sdk.md) — 2.5M weekly downloads
- [@elastic/elasticsearch](https://npm.io/package/@elastic/elasticsearch.md) — 2.1M weekly downloads
- [@c8y/client](https://npm.io/package/@c8y/client.md) — 15.3K weekly downloads
- [@signaldb/maverickjs](https://npm.io/package/@signaldb/maverickjs.md) — 1.7K weekly downloads
- [@bbc/http-transport-cache](https://npm.io/package/@bbc/http-transport-cache.md) — 1.2K weekly downloads

## Recent versions

- 4.0.3 (latest) — 2025-03-12
- 3.0.11 — 2025-03-13
- 4.0.2 — 2024-04-22
- 4.0.1 — 2022-07-19
- 4.0.0 — 2022-02-17
- 3.0.10 — 2022-01-27
- 3.0.9 — 2021-10-05
- 3.0.8 — 2021-09-14
- 3.0.7 — 2020-10-17
- 3.0.6 — 2020-03-24
- 3.0.5 — 2020-01-29
- 3.0.4 — 2020-01-07
- 3.0.2 — 2019-12-06
- 3.0.1 — 2019-12-04
- 3.0.0 — 2019-12-04
- … 20 more at https://npm.io/package/canvg/versions

## README

# canvg

<img align="right" width="120" height="120" alt="Logo" src="website/static/img/logo.svg">

[![NPM version][npm]][npm-url]
[![Dependencies status][deps]][deps-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]

[npm]: https://img.shields.io/npm/v/canvg.svg
[npm-url]: https://npmjs.com/package/canvg

[deps]: https://img.shields.io/librariesio/release/npm/canvg
[deps-url]: https://libraries.io/npm/canvg/tree

[build]: https://img.shields.io/github/actions/workflow/status/canvg/canvg/ci.yml?branch=master
[build-url]: https://github.com/canvg/canvg/actions

[coverage]: https://img.shields.io/codecov/c/github/canvg/canvg.svg
[coverage-url]: https://app.codecov.io/gh/canvg/canvg

JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders the result on Canvas. It also can be used to rasterize SVG images.

<a href="#quickstart">Quickstart</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="#docs">Docs</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="https://canvg.js.org/demo/">Demo</a>
<br />
<hr />

## Quickstart

Install this library using your favorite package manager:

```sh
pnpm add canvg
# or
yarn add canvg
# or
npm i canvg
```

Then, just import `Canvg` and use it:

```js
import { Canvg } from 'canvg';

let v = null;

window.onload = async () => {
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');

  v = await Canvg.from(ctx, './svgs/1.svg');

  // Start SVG rendering with animations and mouse handling.
  v.start();
};

window.onbeforeunload = () => {
  v.stop();
};
```

[Description of all exports you can find in Documentation.](https://canvg.js.org/api)

<br />

## Docs

- [Migration to v4](https://canvg.js.org/docs/migration-to-v4)
- [API](https://canvg.js.org/api/classes/Canvg)
- [Examples](https://canvg.js.org/examples)

## What's implemented?

The end goal is everything from the [SVG spec](http://www.w3.org/TR/SVG/). The majority of the rendering and animation is working. If you would like to see a feature implemented, don't hesitate to add it to the issues list, or better is to create pull request 😎

---
_Source: https://npm.io/package/canvg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._