convert a .svg in a .json

[barbara]

Hi,

I'm making platform games with phaser, and to do so i prepare my levels in inkscape, i give a label to each image so when i end it i finally get an .svg document with an x and a y for each labeled element. 

Then i replace and delete all the useless text with my code editor till i get it in a .json format so i can pass it to my game as a new level. Is a repetitive and boring work, i hate it.  

So now i'm thinking in write a little "program" or script to do it. What i really don't know is how to pass through a text that it isn't an html or a php.

i would prefer to code it with js as is the language i know most, but i'm open to suggestions.

I think it shouldn't be so difficult as is only gather some text and creating a new document, but i don't know where to start.

Thanks!

[mattstyles]

You can use JS just fine, it won't be as quick as some other languages you could use but given that svg files are small and you're not doing much to it it will (almost certainly) be more than fast enough for your needs.

Either pipe an svg file into your node process, or using `fs.readFile` or `fs.createReadStream` to grab the svg file you want to convert, then start parsing it.

Work out what the rules are for your conversion. Svg is DOM, so I'm not sure how you're proposing to convert that to json, but, as you're doing it manually you're just following some conversion rules.

You might get away with simple regex and replace for your rules, this is the simplest conceptually but can be quite error prone and its not very powerful if your rules get a bit more complex. The 2nd method is to convert the svg into an Abstract Syntax Tree (AST) and then use that to make a conversion before piecing it back together when you're done and have created your json representation (and which point use fs.createWriteStream or fs.writeFile or pipe it out of your process).

Doing stuff with an AST can be a little trickier and it sounds like it's probably overkill for what you need but its an interesting topic and its widely used as JS firmly has a build process nowadays, check out how Babel, Traceur, JSX conversion etc etc work, they all use ASTs to implement more complex transformational logic.

[b10b]

Try the Cheerio lib within your node app - I've used it extensively for server-side SVG manipulation and found it to be a reliable and stable library.

https://cheerio.js.org/

[dimumurray]

You can automate your tasks by creating an Inkscape extension. You'll need to know Python. Here's a link to some documentation to get you started:
https://inkscape.org/en/develop/extensions/