canvg-browser

Javascript SVG parser and renderer on Canvas

Showing:

Popularity

Downloads/wk

27.1K

GitHub Stars

18

Maintenance

Last Commit

1yr ago

Contributors

19

Package

Dependencies

3

Size (min+gzip)

27.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

canvg-browser

Build Status

A port of canvg that properly works in the browser as CommonJS module.

Differences to canvg

  • Exposes CommonJS module
  • Dependencies such as rgbcolor and stackblur are required in the CommonJS way, too
  • Test cases verify this project works in the browser

Installation

npm install canvg-browser --save

Usage

Put a canvas on your page:

<canvas id="canvas" width="200px" height="200px"></canvas>
var canvg = require('canvg-browser'),
    canvas = document.getElementById('canvas');

var svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" /></svg>';

var options = {
  log: false,
  ignoreMouse: true
};

canvg(canvas, svg, options);

Options

  • log: true => console.log information
  • ignoreMouse: true => ignore mouse events
  • ignoreAnimation: true => ignore animations
  • ignoreDimensions: true => does not try to resize canvas
  • ignoreClear: true => does not clear canvas
  • offsetX: int => draws at a x offset
  • offsetY: int => draws at a y offset
  • scaleWidth: int => scales horizontally to width
  • scaleHeight: int => scales vertically to height
  • renderCallback: function => will call the function after the first render is completed
  • forceRedraw: function => will call the function on every frame, if it returns true, will redraw
  • useCORS: true => will attempt to use CORS on images to not taint canvas

You can call canvg without parameters to replace all svg images on a page. See the example.

There is also a built in extension method to the canvas context to draw svgs similar to the way drawImage works:

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100