Jump to content
You must now use your email address to sign in [click for more info] ×

Recommended Posts

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

Link to comment
Share on other sites

  • 2 years later...

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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"}


Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

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.

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.