Inspiring

Answered

After Effects Animation to SVG

12 replies
44920 views
Translate

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

TweakvideoMattCorrect answer

Inspiring

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...

A

amazing_Wonder2ab7

Participant

Great thread on exporting AE animations! If anyone is using Lottie / BodyMovin or SMIL for animated SVGs and running into file size or performance lag on live sites, converting those animations into Animated WebP is a huge game-changer. It preserves the exact frames while dropping the file size significantly.

You can try converting them online here if needed: https://svg-to-ico.org/web-optimization/svg-to-webp

Translate

M

Mehdi38094920mus9

Participant

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

Translate

R

ranganad43712087

Participant

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

Translate

M

Matthew Hotchkiss

Participating Frequently

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

Translate

TweakvideoMattAuthorCorrect answer

Inspiring

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...

Translate

Kevin J. Monahan Jr.

Legend

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

Translate

Kevin Monahan - Sr. Community and Engagement Strategist – Adobe Pro Video and Audio

M

Matthew Hotchkiss

Participating Frequently

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.....

Translate