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.

Quickstart   •   Docs   •   Demo

Quickstart

Install this library using your favorite package manager:

pnpm add canvg
# or
yarn add canvg
# or
npm i 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();
};

Description of all exports you can find in Documentation.

Docs

• Migration to v4
• API
• Examples

What's implemented?

The end goal is everything from the SVG spec. 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 😎

Similar packages

Other packages similar to canvg

fabric

Fabric.js is a powerful and rich graphics library, allowing you to manipulate and render both SVG and Canvas elements. Compared to canvg, Fabric.js offers a broader set of features for interactive object model on canvas, including a full suite of interactive capabilities such as drag and drop, object manipulation, and events.

svg2canvas

svg2canvas is another library that focuses on converting SVG documents into Canvas elements. While similar in purpose to canvg, svg2canvas might have different implementation details or performance characteristics, making it a viable alternative depending on specific project requirements.