<commit_before># canvg

[![NPM version][npm]][npm-url]
[![Dependencies status][deps]][deps-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]
[![Documentation badge][documentation]][documentation-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/workflow/status/canvg/canvg/CI.svg
[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

[documentation]: https://img.shields.io/badge/API-Documentation-2b7489.svg
[documentation-url]: https://canvg.github.io/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.

<a href="#quickstart">Quickstart</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="#examples">Examples</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="#options">Options</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="https://canvg.github.io/canvg/demo/index.html">Demo</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="https://jsfiddle.net/0q1vrjxk/">Playground</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.github.io/canvg/index.html)

<br />

[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/)

## Examples

<details>
  <summary>
    <b>OffscreenCanvas</b>
  </summary>

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

self.onmessage = async (event) => {
  const {
    width,<commit_msg>docs: fix sponsor link(#1632)<commit_after># canvg

[![NPM version][npm]][npm-url]
[![Dependencies status][deps]][deps-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]
[![Documentation badge][documentation]][documentation-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/workflow/status/canvg/canvg/CI.svg
[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

[documentation]: https://img.shields.io/badge/API-Documentation-2b7489.svg
[documentation-url]: https://canvg.github.io/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.

<a href="#quickstart">Quickstart</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="#examples">Examples</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="#options">Options</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="https://canvg.github.io/canvg/demo/index.html">Demo</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="https://jsfiddle.net/0q1vrjxk/">Playground</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.github.io/canvg/index.html)

<br />

[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-canvg)

## Examples

<details>
  <summary>
    <b>OffscreenCanvas</b>
  </summary>

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

self.onmessage = async (event) => {
  const {
    width,
{'fraction_non_alphanumeric': 0.19429175475687105, 'fraction_numerical': 0.016913319238900635, 'mean_word_length': 4.762484774665043, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 61, 'https://': 30, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3885345', 'n_tokens_mistral': 1927, 'n_tokens_neox': 1759, 'n_words': 338}