Raphael JS - Parsing an SVG on the fly

Question

I found a neat SVG parser at http://bkp.ee/atirip/ which parses an SVG file and outputs it into javascript that uses the Raphael JS library (raphaeljs.com). You'll notice in the source code at http://bkp.ee/atirip/svg2rdemo.php :

<script>
  jQuery(document).ready( function() {
    $("#c1").each(function(){  
    var c = Raphael(this, 190, 154, 0, 0);
    var g1 = c.set();
    ...

it creates variables like g1, g2, etc. But it also reuses these variables. I would like to create unique variables for each group. In my .ai file, I have named my groups and I would like to use these names to create the variable names.

Where in http://bkp.ee/atirip/f/svgToRaphaelParser.php.zip should I look to make this change?

Answer 1

Hi Chris,

I made some adjustments and squeezed one bug. You may download the new version.

Now you can call parser like this:

svgToRaphaelParser::parse(filename, containername, canvasname, groupname, shapename)

without shapename it works like it used to: svgToRaphaelParser::parse("f.svg", "this", "c", "g") produces code you are already familiar,

to avoid reusing the same names, use different canvas and/or group name for different SVG files

As a new feature, if you need to access to different shapes, use it like this: svgToRaphaelParser::parse("f.svg", "this", "c", "g", "s")

without shapename you receive this:

g1.push(c.path(...));

with shapename you receive this

var s1 = c.path(...); g1.push(s1);