Highlighted

SVG animation ready for the web

Community Beginner ,
Apr 21, 2020

Copy link to clipboard

Copied

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 🙂

Topics

CC FAQ, Collaboration, Creative Cloud, Feature request, New user

Views

451

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

SVG animation ready for the web

Community Beginner ,
Apr 21, 2020

Copy link to clipboard

Copied

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 🙂

Topics

CC FAQ, Collaboration, Creative Cloud, Feature request, New user

Views

452

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Apr 21, 2020

Copy link to clipboard

Copied

google: svg animation and adobe animate cc.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Apr 21, 2020

Copy link to clipboard

Copied

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

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Apr 22, 2020

Copy link to clipboard

Copied

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 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Apr 22, 2020

Copy link to clipboard

Copied

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!

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...