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.
(Vector Image by F. Marchan, Derived from ‘A Riding Amazon’ by Kandinsky)
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.
A script to convert SVG files to Raphael JS. This was designed for SVG files generated by the Inkscape Vector Graphics program.
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:
- Prepare an SVG file with Inkscape and put it in the same directory as svgConverter.py
- Open a terminal in that directory.
- 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’.
Use or remix this code as you wish, it is now public domain. (as of January, 2013)
Please send any concerns or suggestions to Flarnie Marchan by commenting here or contacting me.
This work, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.