Lottie-web: Convert JSON to SVG

[walkingfearless]

Hi all!

First, thanks for bodymovin. Really great idea, but I still didn't take advantage of it.
I don't even know if this is possible or if this is just a dumb question.
I've found bodymovin because I was looking for a way to export an AE animation to SVG. But when I use bodymovin, all I got is a JSON file. Am I missing something? Can you guys help me to have just an SVG file?

Thanks in advance!

[bodymovin]

@walkingfearless hi!
If you want an animated svg compatible with all modern browsers you need to use css or javascript to animate it.
This plugin relies on js to render the animation so you need to load it with the js player for it to work.
Look at the demos folder to see examples on how to do it.
If you need further help let me know

[santi-playmodes]

Hello bodymovin!
I'm in a similar situation than walkingfearless. I've been working from AfterEffects and could export the json, but i would like to convert this json in a svg sequence (as many svg files as frames contained in the json).
The final output for the animation is not a web browser, but an animation tool which is not compatible with json files.
Any idea how this json to svg conversion could be performed?

thank you very much!

[bodymovin]

@santi-playmodes in a browser, you can get the innerHtml of the svg element on each frame and save them to separate svg files.
It shouldn't be too difficult to achieve.
I'd suggest that you run them afterwards with an svg optimizer to reduce filesize.

[pranav0008]

Hey hi,
I am working on an Ontology file, i converted it into JSON format but the thing left is convert JSON file into SVG file. Can u tell me how?

[bodymovin]

hi @pranav0008 , is the answer I gave to santi-playmodes helpful?

[Onlypar2]

after i export the svg for each frame, how can i make it play? I am asking this because, right now my Json file is playing only based on the JS player from bodymovin, which is pretty heavy for my purpose (site loader). I prefer a loader of 20 to 50 Kb max, but because of bodymovin files, its turning out to be 280 KB. (Json file is only 24 kb). So the main problem for me is the file size and not SVG or Json. Please provide some insight on how can i get better results. Thank you.

[bodymovin]

@Onlypar2 for a loader of the site, bodymovin is probably not the right tool because of it's filesize. You might have to settle with using css for those type of animations.

[GitHubianin]

@bodymovin I have json file and I have no idea how "to get the innerHtml of the svg element on each frame and save them to separate svg files".
Could you tell me what I should to do to convert json to svg sequence?
Are there any software solutions?

[BraverChiang]

hi @pranav0008 , is the answer I gave to santi-playmodes helpful?

I copied the whole svg tag from Safari inspect element while playing a animation json file in the browser. but when I used this svg tag in html , it's static, how can I make it animate? thank you.