After Effects Animation to SVG

[TweakvideoMatt]

We always make animations in AE and export to .mp4.

However, we'd like to learn how to import our AE project in to a software programme and export to .SVG (export to SVG from AE would be nice)

What is the correct work flow for this task? And indeed, what is the correct Adobe package or other?

Animated GIFs and .swf files aren't quite right.

This is just for simple animated logos for the time being. On a transparent layer even. Are SVGs limited to line art?

All help appreciated!

Matt

[Joseph Labrecque]

I moved this question to the After Effects forums.

[TweakvideoMatt]

Thanks Joseph,

May I ask your opinion on;

What is the best workflow for producing SVG animations?

Are responsive, web based animations best suited to simple, line art styles?

thanks for you help, Matt

[Mylenium]

AE doesn't export SVGs. You can try the Bodymovin' script, but that's as good as it gets.:

Bodymovin - aescripts.com

Otherwise such stuff is done in Animate CC.

Mylenium

[Joseph Labrecque]

I've only ever used Animate CC for SVG. There is a document extension for it to produce animated SVG:
Export SVG Animations for the Web with Snap.SVG Animator | Adobe Blog

[Mehdi38094920mus9]

Export SVG Animation From After Effects (100% SVG File)
https://youtu.be/NbvLvOfea-0

[TweakvideoMatt · Accepted solution]

Thanks for these responses Mylenium and JosephLabrecque - we have tried Bodymovin and snap.SVG and both didn't quite work.

We are also looking at GSAP Greensock...

As animators we'll now ascertain in the beginning what the output/intended use is in the beginning. We have accepted that you can't have a beautiful cartoon converted to code : - (

I think we are trying to produce something that the correct plugin/software is not yet available for. Surely a truly, scalable, responsive animation format should come soon...

[Kevin-Monahan]

Sounds like you've discovered the correct answer is that there is no software capable of doing what you wish. Sorry about that, TweakvideoMatt.

Best,

Kevin

[Matthew Hotchkiss]

Snap.svg looks amazing for CC animate.  Could the Adobe guys make a similar lower tech version for AE?  Bodymovin works well out of AE but needs a huge amount of coding in Dreamweaver or web package which puts designers/animators off.  I ended up using SVGator ( a very basic animation software for layered illustrator or svg files) alot!!  https://www.svgator.com It is as simple as animating a .giff in Photoshop.  However the animation toolset is no way comparable with the abilities of After Effects combined with Illustrator so please Adobe team.. AE is already the head of UI/UX animation in London in combination with XD and Illustrator, so lets keep svg animation with Adobe so I don't have to learn another third party software again.....

[ranganad43712087]

Is there any adobe product that can make an animating SVG images ? I have tried with Adobe Animate CC but I could't make it. thanks

[Matthew Hotchkiss]

Maybe give SVGator a go as it doesnt look like anything has been developed by Adobe yet.  It doesn't have a very powerful animation toolset but works really well with Illustrator layers.

https://www.svgator.com

[Mehdi38094920mus9]

I think this video useful. Export SVG Animation From After Effects (100% SVG File)
https://youtu.be/NbvLvOfea-0