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?