psocretes Posted March 10, 2018 Share Posted March 10, 2018 I have recently become aware of the ability to animate SVG (Affinity Designer) for the web. There are applications coming out that make it really easy, however, the file size is a serious problem if you intend to have your work in a web page as Affinity does not offer the reduction of file size. Here is a youtube video I made on 09/03/2018. It is impressive what one can achieve. This is a concept for a web homepage. If you look closely there is some really subtle animation. The balloon has a flame which gets turned on and off to make it rise, the balloon also changes size in that as it moves away into the air it gets smaller. The clouds in places are semi-transparent. Also, the sun has a haze around it which disperses as the sun bets higher in the sky. All these really subtle changes make for huge file sizes. One online SVG animator which is still in beta is svgator.com which is free but limited. I have included a file of a puppy wagging its tail and turning its head which I animated in svgator. Just drag the (1A 76 questioning puppy.svg) file onto a web browser and it will automatically play and is on infinite loop. You have to export the files as an SVG from Affinity Designer and then upload that file into the svgator system. The head, body and tail have to be different and separate files to be able to animate them: i.e. the head would be nested in affinity designer the body would be nested and so would the tail. Exported as SVG and then imported to your animator of choice and there are many out there some free. 1A 76 questioning puppy.svg Quote Link to comment Share on other sites More sharing options...
Sri Posted June 6, 2020 Share Posted June 6, 2020 HI, I am trying to animate in svgator. But when I export to javascript, with what file name should I save in my computer? And is there a way I can convert svgator export to a gif or mov? Quote Link to comment Share on other sites More sharing options...
Wosven Posted June 6, 2020 Share Posted June 6, 2020 Hi, Shouldn't you export to SVG? There are online sites to convert from SVG to GIF. Quote Link to comment Share on other sites More sharing options...
Sri Posted June 6, 2020 Share Posted June 6, 2020 SVGator converts the animation to .js . And if I save the same as a svg file on my laptop, the animation is no more there. Regardless I saved the .js export as an svg image and used online platforms for gif conversion. It didn't work. But If I run the js code on code beautify, the animation is there. So now I have a java script of the animation and I am struggling to make it into a gif or mov. Any suggestions are welcome. i am attaching the saved svg image and the js files for your reference. Dance to fight.js Dance to fight svg animated.svg Quote Link to comment Share on other sites More sharing options...
Wosven Posted June 6, 2020 Share Posted June 6, 2020 But that's SVG, not JS: it's begining by "<svg " and ending by "</svg>" tags. Inside the SVG code, you've got JavaScript code (inside the tags "<script>...</script>". Once you've modified the extension to .svg, you can open it in a browser, and the animation will only begin on click, as specified in the code. In the JavaScript, you can read at the end an option for the animation to start when clicking on the image: "options":{"start":"click","hover":"restart"} If you want the animation to repeat itself, you just need to delete this part (be carefull about the brackets and don't forget the coma at the begining): ,"options":{"start":"click","hover":"restart"} Quote Link to comment Share on other sites More sharing options...
Sri Posted June 6, 2020 Share Posted June 6, 2020 Oh! Thank you for the clarity. i didn't know that I could drag and drop the svg file on to the browser, for it to run. But when I convert this svg to gif, via online tools, the animation isnt playing. Could you help me with that? Where am I going wrong? Quote Link to comment Share on other sites More sharing options...
Wosven Posted June 6, 2020 Share Posted June 6, 2020 I suppose it's because it's not converted to an animated GIF, just a simple one with only one image. I didn't test it, but you can try this, you'll need to create an account to download the result: https://loading.io/ An explanation from the author: https://www.quora.com/How-do-I-convert-animated-svg-to-gif Quote Link to comment Share on other sites More sharing options...
Sri Posted June 6, 2020 Share Posted June 6, 2020 Loading.io works man! Thank you very much Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.