Skip to main content
TweakvideoMatt
Inspiring
January 30, 2018
Answered

After Effects Animation to SVG

  • January 30, 2018
  • 4 replies
  • 44598 views

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

Correct answer TweakvideoMatt

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

4 replies

Participant
June 17, 2024

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

Participant
September 20, 2018

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

Participating Frequently
November 4, 2019

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

TweakvideoMatt
TweakvideoMattAuthorCorrect answer
Inspiring
January 30, 2018

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
Community Manager
Community Manager
February 7, 2018

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

Kevin Monahan - Sr. Community and Engagement Strategist – Adobe Pro Video and Audio
Participating Frequently
November 4, 2019

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

 

Joseph Labrecque
Community Expert
Community Expert
January 30, 2018

I moved this question to the After Effects forums.

TweakvideoMatt
Inspiring
January 30, 2018

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

Joseph Labrecque
Community Expert
Community Expert
January 30, 2018

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