SVG animation ready for the web

[fab222222]

Hello everyone, 🙂

I'm looking into creating svg animation for a client, but I have no knowledge of javascript or so. I have the svg still illustrations created on Illustrator. While I was doing some research I came to this website https://www.svgator.com/ which is quite cool and useful.

I was wondering if I could have a final ready to web Adobe program just like Svgator that I could use with no coding knowledge. It will be mostly just very very soft position animations. No more than that.

Could someone help me please ?

Thank you in advance 🙂

[kglad]

google: svg animation and adobe animate cc.

[Nancy OShea]

Even the best tools will only take you so far with animated SVG. When client asks for changes (and they always do), you need to understand the underlying code.  Otherwise, you're back to square one.  

Unfortunately, I have not found the perfect tool for creating SVG animations.  I don't think one exists yet.  Illustrator's exported SVG code tends to be bloated and disorganized.  You can mitigate this to some extent by giving your layers good identifiable names and using the right export settings (see link below).  But some code cleanup is essential.

https://blog.envylabs.com/svg-export-settings-for-custom-css-animations-adobe-illustrator-e106f77c6c...

The good news is SVG is just glorified XML code which is simple to learn and work with in any decent code editor (Dreamweaver, Brackets, etc...).  See link below.  Read the chapters. Work with code examples.  And of course, experiment on your own. You'll be surprised how much you learn from working with SVG code.

https://www.w3schools.com/graphics/svg_intro.asp

[fab222222]

Thank you for your replies.

I don't have any Javascript knowledge and the delay I have won't allow me to learn it.

I really need something programm that could export the svg animation. I mean just as for After Effects we add the position and rotation animation and then we export the file as simple as that. Does it not exist ?

Than you again 🙂

[Nancy OShea]

SVG is not JavaScript.

Try Animate CC with this 3rd party extension.

Disclaimer: I've never used it.

https://github.com/TomByrne/Flash2Svg

Or if time is limited, sub-contract this out to someone with more HTML, CSS and SVG experience.

Good luck!