SVG to Raphael JS

The need to parse SVG (scalable vector graphics) files from Inkscape directly into the Raphael JS format is one of the major hurdles to really using the Raphael JS vector graphics library. For my own projects, I’ve had the help of several python scripts that assist in this task, and thought I would share some of the results.

Example 1:

(Vector Image by F. Marchan, Derived from ‘A Riding Amazon’ by Kandinsky)
The color-change background was just for fun, but aside from that animation the javascript was generated by the svgConverter python script.

Example 2:

(Generated from a resized version of Color Circles by Nevit Dilmen)

If you need to parse a complex Inkscape SVG file into the Raphael JS format, then feel free to download the svgConverter script from github. Instructions and basic documentation are available in the README, or after the cut.

SVG to Raphael JS: svgConverter.py

This is a small script with the potential to be very helpful.

Summary

A script to convert SVG files to Raphael JS. This was designed for SVG files generated by the Inkscape Vector Graphics program.

Purpose

This script is designed to parse SVG files for conversion to the Raphael JS format. Raphael JS 2.0 is a javascript library that generates and animates cross-browser friendly vector graphics for the web. Some SVG images have too many paths for manually copy-pasting into Raphael JS formatting. This script reads the SVG file as XML and generates a Raphael JS canvas of the same size. It then grabs all the ‘path’ elements in the SVG and their attributes, writing a javascript array containing this data. It ends by writing a javascript loop to draw each path on the Raphael JS canvas.

How to Use

To prepare an SVG file in Inkscape for parsing:

  • Select all, and then under the ‘Path’ top menu choose ‘Object to Path’
  • Eliminate all layers by copy-pasting all paths onto the blank page and deleting layers
  • Select all paths and the ‘Path’ top menu choose ‘Break Apart’
  • (Caution: using the ‘Break Apart’ command on images that are generated from a raster image can alter the fill of ‘open’ areas. This can be manually fixed for simple images.)

These steps will simplify the structure of the SVG file and allow the svgConverter to parse it easily.

When run, svgConverter.py will convert all SVG files in the same directory to Raphael JS format, saving the result in a new file without altering the original SVG.

In three steps:

  1. Prepare an SVG file with Inkscape and put it in the same directory as svgConverter.py
  2. Open a terminal in that directory.
  3. With python installed, run svgConverter.py (type ‘python svgConverter.py’)

It will create a js file using the original SVG filename followed by ‘.converted.js’.

License

Use or remix this code as you wish, it is now public domain. (as of January, 2013)

Help

Please send any concerns or suggestions to Flarnie Marchan by commenting here or contacting me.

Creative Commons License
This work, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.