JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Canvg

    Javascript SVG parser and renderer on Canvas
    Filed under  › 

    • 🔾67%Overall
    • 3,099
    • 4.3 days
    • 🕩581
    • 👥7

    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.


    supported by Cube

    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 😎

    Show All