SVG to HTML5 Canvas Converter
This tool converts SVG into an HTML5 Canvas JavaScript function. It will work with any host, and I hope it helps people to experiment with Canvas. Most vector art packages (Illustrator, Inkscape etc) can export as SVG.
It uses a modified version of the excellent Canvg library. Canvg usually renders the SVG immediately and does not output JavaScript source code.
Having the source code available allows you to tweak, study and manipulate the Canvas statements as required. It works with a reasonable subset of SVG. Due to the low-level nature of Canvas, some of the JavaScript functions can be quite large
There are a few issues (things that Canvg copes with that this tool doesn't). I'll look at these in due course:
- Text does not work
- Fill patterns do not work
Paste SVG in here:
the SVG into a JavaScript HTML5 Canvas function.
The function should be passed a Canvas 2d drawing context.
Output from the JavaScript function is shown below:
