You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

README.md 4.4 KiB

3 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. [![Build Status](https://travis-ci.com/canvg/canvg.svg?branch=master)](https://travis-ci.com/canvg/canvg)
  2. [![npm](https://img.shields.io/npm/dm/canvg.svg)](https://www.npmjs.com/package/canvg)
  3. [![](https://data.jsdelivr.com/v1/package/npm/canvg/badge?style=rounded)](https://www.jsdelivr.com/package/npm/canvg)
  4. Looking for Contributors
  5. ============
  6. In an attempt to keep this repo more active and merge PRs and do releases, if you would like to be a contributor, please start a conversation with me at gabelerner at gmail. The prerequisite is to have a few PRs open to prove out an understanding of the code. Thanks!
  7. Introduction
  8. ============
  9. 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.
  10. What's implemented?
  11. ===================
  12. 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.
  13. Potential uses
  14. ===============
  15. * Allows for inline embedding of SVG through JavaScript (w/o having to request another file or break validation)
  16. * Allows for single SVG version across all browsers that support Canvas
  17. * Allows for mobile devices supporting Canvas but not SVG to render SVG
  18. * 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))
  19. Example Demonstration
  20. =====================
  21. [hosted](http://canvg.github.io/canvg/examples/index.htm)
  22. [jsfiddle playground](http://jsfiddle.net/6r2jug6o/2590/)
  23. Locally, you can run `npm start` and view the examples at [http://localhost:3123/examples/index.htm](http://localhost:3123/examples/index.htm)
  24. Building
  25. ========
  26. `npm run build` then look in the `dist` folder
  27. Testing
  28. =======
  29. `npm run test`
  30. `npm run generate-expected foo.svg` to create the expected png for a given svg in the `svgs` folder
  31. Usage on the server
  32. ===================
  33. `npm install canvg`
  34. Usage on the Browser
  35. ====================
  36. Include the following files in your page:
  37. ```html
  38. <!-- Required to convert named colors to RGB -->
  39. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
  40. <!-- Optional if you want blur -->
  41. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
  42. <!-- Main canvg code -->
  43. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
  44. ```
  45. Put a canvas on your page
  46. ```html
  47. <canvas id="canvas" width="1000px" height="600px"></canvas>
  48. ```
  49. Example canvg calls:
  50. ```html
  51. <script type="text/javascript">
  52. window.onload = function() {
  53. //load '../path/to/your.svg' in the canvas with id = 'canvas'
  54. canvg('canvas', '../path/to/your.svg')
  55. //load a svg snippet in the canvas with id = 'drawingArea'
  56. canvg(document.getElementById('drawingArea'), '<svg>...</svg>')
  57. //ignore mouse events and animation
  58. canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true })
  59. }
  60. </script>
  61. ```
  62. The third parameter is options:
  63. * log: true => console.log information
  64. * ignoreMouse: true => ignore mouse events
  65. * ignoreAnimation: true => ignore animations
  66. * ignoreDimensions: true => does not try to resize canvas
  67. * ignoreClear: true => does not clear canvas
  68. * offsetX: int => draws at a x offset
  69. * offsetY: int => draws at a y offset
  70. * scaleWidth: int => scales horizontally to width
  71. * scaleHeight: int => scales vertically to height
  72. * renderCallback: function => will call the function after the first render is completed
  73. * forceRedraw: function => will call the function on every frame, if it returns true, will redraw
  74. * useCORS: true => will attempt to use CORS on images to not taint canvas
  75. You can call canvg without parameters to replace all svg images on a page. See the
  76. [example](http://canvg.github.io/canvg/examples/convert.htm).
  77. 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:
  78. ```javascript
  79. var c = document.getElementById('canvas');
  80. var ctx = c.getContext('2d');
  81. ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);
  82. ```