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.
Quickstart​
Install this library using your favorite package manager:
- pnpm
- yarn
- npm
pnpm add canvg
yarn add canvg
npm install --save canvg
Then, just import Canvg
and use it:
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();
};
Examples​
Please see live examples.
Getting Help​
Need help? Ask your question on Stack Overflow.
If you've encountered an issue, please file it on GitHub.