Jump to content

convert a .svg in a .json


barbara
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...