svg2js.py
You probably want to skip straight to a really nice implementation of this idea; http://svg2js.sourceforge.net/
This page describes my svg2js.py tool.
svg2js.py converts from an SVG file to html5/canvas/javascript. My motivation for developing this code was the `health and safety' demo by Neuralyte. I can't imagine what your use case is, but If you need to perform a similar conversion this tool may suffice.
So, assuming you need to perform this conversion, what will the results look like?
Here is a canned demo:
Example
becomes
Usage
./svg2js.py
--javascript not specified
Convert svg to Javascript HTML 5 canvas calls.
-f [--svgfile] <filename> svgfilename.
-j [--javascript] <filename> name for javascript output file.
-o overwrite the output files automatically.
if you run it with the attached file (at the bottom), you will call:
./svg2js.py -f ./svg2js.svg -o -j ./svg2js.js
This will produce a svg2js.js file that contains html5/canvas/javascript calls to draw the svg file on a canvas object. You can include this js file into your html file with the following example:
<html>
<head>
<title>Canvas tutorial</title>
<SCRIPT language="JavaScript" SRC="./svg2js.js"></script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="svgConvert" width="350" height="250"></canvas>
</body>
</html>
Code
The code is available on gitorious:
http://gitorious.org/svg2js/svg2js
Status
There are a number of limitations with the current code:
Fonts are not supported. This is obvious by comparing the input and out examples above.
There is a lingering bug with conversion. You can observe this in the spikes on the converted svg on the 'g' character.
There is a bug with the way strokewidth is calculated. This can be seen on the 'v/g' character above.
A test suite would be nice...
And maybe a live demo - do googlepages support user javascript?