Socket
Socket
Sign inDemoInstall

canvg-browser

Package Overview
Dependencies
3
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

canvg-browser

Javascript SVG parser and renderer on Canvas, adapted for CommonJS


Version published
Maintainers
1
Weekly downloads
2,969
decreased by-17.96%

Weekly downloads

Readme

Source

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

Keywords

FAQs

Last updated on 16 Mar 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc