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:

Share |

Useful website? You can donate to support it. Thanks.

Need Good Hosting?

Hostgator Reliable Hosting

I use Host Gator for this site, and have found them to be good value and very reliable. Sign up now and use coupon code professorcloud to receive a $9.95 rebate.