Javascript SVG parser and renderer on Canvas
JavaScript
Pull request Compare This branch is 11 commits ahead of ricardomatias:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test test(markers): verify correct marker export Dec 20, 2016
.gitignore
.travis.yml
MIT-LICENSE.txt
README.md
index.js
package.json chore(project): prepare for npm publishing Mar 15, 2016

README.md

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);

Related Repositories