[29567] | 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/)
|
---|