A few examples of using svg2canvas

The canvas items on this page were created as SVG files, and then converted to javascript using my online service, svg2canvas.

This first one is just something I whipped up quick, using Inkscape. The text "Pow!" was converted to a path.

Next, I have a ladybug that I downloaded from www.openclipart.org, drawn by someone named "/ lemmling". You can see the original SVG here: Original SVG

Finally, I have a gauge that I drew up. This gauge is animated, which required a bit of coding, to animate only the needle.

HTML5 Canvas Editing

I have been experimenting for a while now with the HTML5 canvas element.
I have encountered a few drawbacks while doing so.

• The first drawback is that there is no ellipse support!  You can draw a circle, or a circle segment / arc.  But you will have to use cubic bezier curves if you want to draw an ellipse.
• Ever try to edit a bezier curve by hand? Ouch.
• And finally, there isn't really any editor support out there yet.

With that in mind, let me present my solution, for all you HTML5 canvas developers:  svg2canvas.
I wrote up a bare-bones converter applet, that will accept a small svg file, and attempt to convert it to a javascript file using canvas.
As noted in the webapp, there is nowhere near full SVG support.  Text is not even supported yet!  However, you can always convert text to a path.


Here it is:
http://www.antennamap.com/svg2canvas
Note: This is currently broken.  If anyone is interested in trying it out, let me know and I'll get it working somewhere else.

Instructions:

• Download and install Inkscape
• Draw up a nice SVG graphic
• Upload it to svg2canvas
• Preview and download javascript!
• Maybe think about posting a comment!

I make no guarantee that your SVG file will work.  Here's hoping!