1 | Introduction
|
---|
2 | ============
|
---|
3 | 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](http://dev.w3.org/html5/2dcontext/) element. The rendering speed of the examples is about as fast as native SVG.
|
---|
4 |
|
---|
5 | What's implemented?
|
---|
6 | ===================
|
---|
7 | The end goal is everything from the [SVG spec](http://www.w3.org/TR/SVG/). 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.
|
---|
8 |
|
---|
9 | Potential uses
|
---|
10 | ===============
|
---|
11 | * Allows for inline embedding of SVG through JavaScript (w/o having to request another file or break validation)
|
---|
12 | * Allows for single SVG version across all browsers that support Canvas
|
---|
13 | * Allows for mobile devices supporting Canvas but not SVG to render SVG
|
---|
14 | * Allows for SVG -> Canvas -> png transition all on the client side (through [toDataUrl](http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl))
|
---|
15 |
|
---|
16 | Example Demonstration
|
---|
17 | =====================
|
---|
18 | [view here](http://gabelerner.github.io/canvg/examples/index.htm)
|
---|
19 | Tested in Chrome, Firefox, Opera, and IE (through FlashCanvas)
|
---|
20 |
|
---|
21 | [jsfiddle playground](http://jsfiddle.net/qDmhV/)
|
---|
22 |
|
---|
23 | Usage
|
---|
24 | =====
|
---|
25 | Include the following files in your page:
|
---|
26 | ```html
|
---|
27 | <script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
|
---|
28 | <script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
|
---|
29 | <script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>
|
---|
30 | ```
|
---|
31 |
|
---|
32 | Put a canvas on your page
|
---|
33 | ```html
|
---|
34 | <canvas id="canvas" width="1000px" height="600px"></canvas>
|
---|
35 | ```
|
---|
36 |
|
---|
37 | Example canvg calls:
|
---|
38 | ```html
|
---|
39 | <script type="text/javascript">
|
---|
40 | window.onload = function() {
|
---|
41 | //load '../path/to/your.svg' in the canvas with id = 'canvas'
|
---|
42 | canvg('canvas', '../path/to/your.svg')
|
---|
43 |
|
---|
44 | //load a svg snippet in the canvas with id = 'drawingArea'
|
---|
45 | canvg(document.getElementById('drawingArea'), '<svg>...</svg>')
|
---|
46 |
|
---|
47 | //ignore mouse events and animation
|
---|
48 | canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true })
|
---|
49 | }
|
---|
50 | </script>
|
---|
51 | ```
|
---|
52 |
|
---|
53 | The third parameter is options:
|
---|
54 | * log: true => console.log information
|
---|
55 | * ignoreMouse: true => ignore mouse events
|
---|
56 | * ignoreAnimation: true => ignore animations
|
---|
57 | * ignoreDimensions: true => does not try to resize canvas
|
---|
58 | * ignoreClear: true => does not clear canvas
|
---|
59 | * offsetX: int => draws at a x offset
|
---|
60 | * offsetY: int => draws at a y offset
|
---|
61 | * scaleWidth: int => scales horizontally to width
|
---|
62 | * scaleHeight: int => scales vertically to height
|
---|
63 | * renderCallback: function => will call the function after the first render is completed
|
---|
64 | * forceRedraw: function => will call the function on every frame, if it returns true, will redraw
|
---|
65 | * useCORS: true => will attempt to use CORS on images to not taint canvas
|
---|
66 |
|
---|
67 | You can call canvg without parameters to replace all svg images on a page. See the [example](http://gabelerner.github.io/canvg/examples/convert.htm).
|
---|
68 |
|
---|
69 | There is also a built in extension method to the canvas context to draw svgs similar to the way [drawImage](http://www.w3.org/TR/2dcontext/#dom-context-2d-drawimage) works:
|
---|
70 | ```javascript
|
---|
71 | var c = document.getElementById('canvas');
|
---|
72 | var ctx = c.getContext('2d');
|
---|
73 | ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);
|
---|
74 | ```
|
---|
75 |
|
---|
76 | Related Repositories
|
---|
77 | ====================
|
---|
78 | * [Output javascript instead of rendering to canvas](http://code.google.com/p/jscapturecanvas/)
|
---|
79 | * [A combo of canvg & jscapturecanvas to compile SVG to Canvas (Server side)](https://github.com/nathan-muir/canvgc)
|
---|
80 | * [Edit SVG files in your browser](https://code.google.com/p/svg-edit/)
|
---|