Download
User Rating: 0.3/5 ( 2 votes)
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.
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
Source: code.google.com
1. INCLUDE JS FILES
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
2. HTML
<canvas id="canvas" width="1000px" height="600px"></canvas>
3. JAVASCRIPT
window.onload = function() {
//load '../path/to/your.svg' in the canvas with id = 'canvas'
canvg('canvas', '../path/to/your.svg')
//load a svg snippet in the canvas with id = 'drawingArea'
canvg(document.getElementById('drawingArea'), '<svg>...</svg>')
//ignore mouse events and animation
canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true })
}
4. OPTIONS
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