What is canvg?
The canvg npm package is a versatile library that allows users to parse and render SVG (Scalable Vector Graphics) to a Canvas element in a browser or on the server-side using Node.js. It is particularly useful for converting SVGs into Canvas for manipulation, rendering, or exporting purposes.
What are canvg's main functionalities?
Rendering SVG to Canvas
This code sample demonstrates how to load an SVG file, render it onto a Canvas, and then save the Canvas output as a PNG file. This is useful for server-side generation of images from SVG files.
const canvg = require('canvg');
const Canvas = require('canvas');
const fs = require('fs');
const canvas = Canvas.createCanvas(800, 600);
const ctx = canvas.getContext('2d');
const svg = fs.readFileSync('path/to/your/svgfile.svg', 'utf-8');
canvg(ctx, svg);
const out = fs.createWriteStream('path/to/output.png');
const stream = canvas.createPNGStream();
stream.pipe(out);
Manipulating SVG before rendering
This example shows how to manipulate SVG data by changing its color before rendering it to a Canvas. This is useful for dynamically altering the appearance of SVGs based on runtime conditions.
const canvg = require('canvg');
const Canvas = require('canvas');
const fs = require('fs');
const canvas = Canvas.createCanvas(800, 600);
const ctx = canvas.getContext('2d');
let svg = fs.readFileSync('path/to/your/svgfile.svg', 'utf-8');
// Modify SVG data
svg = svg.replace('fill:#000000', 'fill:#123456');
// Render modified SVG to canvas
canvg(ctx, svg);
Other packages similar to canvg
fabric
Fabric.js is a powerful and rich graphics library, allowing you to manipulate and render both SVG and Canvas elements. Compared to canvg, Fabric.js offers a broader set of features for interactive object model on canvas, including a full suite of interactive capabilities such as drag and drop, object manipulation, and events.
svg2canvas
svg2canvas is another library that focuses on converting SVG documents into Canvas elements. While similar in purpose to canvg, svg2canvas might have different implementation details or performance characteristics, making it a viable alternative depending on specific project requirements.
Introduction
canvg is a SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element. The rendering speed of the examples is about as fast as native SVG.
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 contact me or add it to the issues list.
Potential uses
- Allows for inline embedding of SVG through JavaScript (w/o having to request another file or break validation)
- Allows for single SVG version across all browsers that support Canvas
- Allows for mobile devices supporting Canvas but not SVG to render SVG
- Allows for SVG -> Canvas -> png transition all on the client side (through toDataUrl)
Example Demonstration
view here
Tested in Chrome, Firefox, Opera, and IE (through FlashCanvas)
jsfiddle playground
Locally, can use local-web-server
Install with yarn global add local-web-server
In the root directory, run ws
Navigate to http://localhost:8000/examples/index.htm
Usage
Include the following files in your page:
<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script>
Put a canvas on your page
<canvas id="canvas" width="1000px" height="600px"></canvas>
Example canvg calls:
<script type="text/javascript">
window.onload = function() {
canvg('canvas', '../path/to/your.svg')
canvg(document.getElementById('drawingArea'), '<svg>...</svg>')
canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true })
}
</script>
The third parameter is 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