source: other-projects/nz-flag-design/trunk/main-form/lib/canvg/README.md@ 29567

Last change on this file since 29567 was 29567, checked in by davidb, 6 years ago

Addition of further library (to support exporting SVG to PNG) on the iterative-design page

File size: 3.6 KB
Line 
1Introduction
2============
3canvg 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
5What's implemented?
6===================
7The 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
9Potential 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
16Example Demonstration
17=====================
18[view here](http://gabelerner.github.io/canvg/examples/index.htm)
19Tested in Chrome, Firefox, Opera, and IE (through FlashCanvas)
20
21[jsfiddle playground](http://jsfiddle.net/qDmhV/)
22
23Usage
24=====
25Include 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
32Put a canvas on your page
33```html
34<canvas id="canvas" width="1000px" height="600px"></canvas>
35```
36
37Example canvg calls:
38```html
39<script type="text/javascript">
40window.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
53The 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
67You 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
69There 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
71var c = document.getElementById('canvas');
72var ctx = c.getContext('2d');
73ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);
74```
75
76Related 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/)
Note: See TracBrowser for help on using the repository browser.