canvg / canvg

JavaScript SVG parser and renderer on Canvas

Home Page:https://canvg.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

canvg

Logo

NPM version Dependencies status Build status Coverage status

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

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 😎

About

JavaScript SVG parser and renderer on Canvas

https://canvg.js.org

License:MIT License


Languages

Language:TypeScript 53.0%Language:JavaScript 39.5%Language:HTML 5.0%Language:MDX 2.0%Language:CSS 0.4%Language:Shell 0.1%