UNPKG

2.22 kBMarkdownView Raw
1# canvg
2
3<img align="right" width="120" height="120" alt="Logo" src="website/static/img/logo.svg">
4
5[![NPM version][npm]][npm-url]
6[![Dependencies status][deps]][deps-url]
7[![Build status][build]][build-url]
8[![Coverage status][coverage]][coverage-url]
9
10[npm]: https://img.shields.io/npm/v/canvg.svg
11[npm-url]: https://npmjs.com/package/canvg
12
13[deps]: https://img.shields.io/librariesio/release/npm/canvg
14[deps-url]: https://libraries.io/npm/canvg/tree
15
16[build]: https://img.shields.io/github/actions/workflow/status/canvg/canvg/ci.yml?branch=master
17[build-url]: https://github.com/canvg/canvg/actions
18
19[coverage]: https://img.shields.io/codecov/c/github/canvg/canvg.svg
20[coverage-url]: https://app.codecov.io/gh/canvg/canvg
21
22JavaScript 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.
23
24<a href="#quickstart">Quickstart</a>
25<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
26<a href="#docs">Docs</a>
27<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
28<a href="https://canvg.js.org/demo/">Demo</a>
29<br />
30<hr />
31
32## Quickstart
33
34Install this library using your favorite package manager:
35
36```sh
37pnpm add canvg
38# or
39yarn add canvg
40# or
41npm i canvg
42```
43
44Then, just import `Canvg` and use it:
45
46```js
47import { Canvg } from 'canvg';
48
49let v = null;
50
51window.onload = async () => {
52 const canvas = document.querySelector('canvas');
53 const ctx = canvas.getContext('2d');
54
55 v = await Canvg.from(ctx, './svgs/1.svg');
56
57 // Start SVG rendering with animations and mouse handling.
58 v.start();
59};
60
61window.onbeforeunload = () => {
62 v.stop();
63};
64```
65
66[Description of all exports you can find in Documentation.](https://canvg.js.org/api)
67
68<br />
69
70## Docs
71
72- [Migration to v4](https://canvg.js.org/docs/migration-to-v4)
73- [API](https://canvg.js.org/api/classes/Canvg)
74- [Examples](https://canvg.js.org/examples)
75
76## What's implemented?
77
78The 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 😎