Rewriting or converting SVG files into Snapsvg code

[tadd icus]

Hi,

I've just started to switch over to SVGs and have taught myself a little about Inkscape.

I am using Snap.svg to import the SVG files into DIVs on my website but wondered if I could simply convert or pull the information out of the SVG file "code" and translate that to Snap?

The current SVG file is about 1Mb so I would like to try and reduce it and wondered if I could replicate what I've done in Snap.

Thanks 

[Ian]

Do you mean, so you would start with the svg file, it would convert it to code, and then you would end up with Snap code and no svg files/chunks at all, just pure Snap with no markup ? Sounds interesting but challenging if so, but I may be wrong. I wonder if you could do it with some Snap and some text strings of SVG markup or something.

Is the goal just to reduce the file size, or is it so you can get it into Snap to manipulate different elements of it ? Devil is often in the detail!

Ian

[Morgan Craft]

Had this exact question.  I've done some tinkering with Raphaeljs and recently started exploring snapsvgjs.  Of course Oreilly just released a book on RapahelJS and in it is a section talking about how RaphaelJS converts SVG Paths into a series of arrays and one could technically write plan-ole javascript arrays and use those over SVG.  So in RaphaelJS it is possible and I'm assuming it must be in snapsvgjs as well.

I have an interest in this as well my assets I'm trying to load are weighing in around 20-30k each as svg, and ideally within my app I may be loading several variations of these that have been customized and saved by a user.  If I could compress these down into js objects (easier to save in mongo/nosql) and save on bandwidth plus parsing/conversion time in browser that would be ideal. 

Tadd let me know if you have made any progress on this research.  I'm going to begin looking into it as well and will most likely start with a CLI interface to prototype. 

[Allan Kiezel]

You can give readysetraphael.com a try.  It was built to convert svgs into raphaeljs code, but I've been told it works for snap as well.

Hope it helps!

[Morgan Craft]

Thanks Allan for the link.

I have a test svg I've been using that my illustrator gave me and I cleaned up the layers some which it weighs in at 16kb.  I ran it through your link and saved the js output which takes up 19k.  

On a side note, the snapsvg.js examples that are included with the project.  The game board example, if you look at the code it generates dynamic paths for the faces for the tile things which all link through backbone views.  It is a great example of using snapsvg in other ways and with backbone, just wish there were more comments, I had to read the code several times to figure out what some of the variables were since there are usages like `this.s.push(..obj..)`