Import SVG to Shapes + Render to SVG | After Effects Guide

Want to import SVGs as Shape Layers in Adobe After Effects? Well, you can't by default... BUT You can use other programs to get there. This complete guide shows you how to do that, as well as even EXPORTING TO AN ANIMATED SVG! This is a "Complete crash course" of sorts, even though it's only tackling importing SVGs into AE.
Timestamps:
0:00 - Explanation
0:19 - Why SVGs in After Effects?
0:35 - What you need: After Effects, Adobe Illustrator
0:48 - 1. Preparing an SVG
2:50 - 2. Preparing SVG in Illustrator
3:40 - 3. Importing SVG in After Effects (saved as AI)
4:00 - 4. Converting SVG/AI to Shapes in After Effects
5:03 - Fix merging errors (Not hollow shapes, etc.)
5:39 - Animating SVG in After Effects
6:12 - Exporting animated SVG from After Effects using Bodymovin
#SVG #AfterEffects #Bodymovin
-----------------------------
💸 Found this useful? Help me make more! Support me by becoming a member: / @troublechute
-----------------------------
💸 Direct donations via Ko-Fi: ko-fi.com/TCNOco
💬 Discuss video & Suggest (Discord): s.tcno.co/Discord
👉 Game guides & Simple tips: / troublechutebasics
🌐 Website: tcno.co
📧 Need voice overs done? Business query? Contact my business email: TroubleChute (at) tcno.co
Everything in this video is my personal opinion and experience, and should not be considered professional advice. Always do your own research and make sure what you're doing is safe.

[@Shteuf]

This is sick how complicated these softwares are for absolutely nothing. We're in 2022 and one has still to go through this nightmare to import a simple svg. Adobe is just stuck in the past it seems. Thanks for the video though!

[@retrorama3355]

Making programs like After Effects friendly with SVG would make Adobe Illustrator unaffordable and hence obsolete. Adobe had market dominance and need to use this power to force people to use Illustrator otherwise Illustrator would be essentially useless.

[@daloypolitsey6006]

@@retrorama3355 Wait. Are you seriously saying that Illustrator would be useless if people didn't have to use it to convert SVG files?

[@jirehla-ab1671]

​@@daloypolitsey6006​can you still morph or edit the svg in after effects?

[@somniatic]

@@retrorama3355illustrator is plenty useful, to me this just reads that they don’t know how to make Ae better. I had this same headache when making videos in Premiere and realizing it’s the same bumpy issue between Ae and Premiere as it is with Illustrator. I think Adobe just likes to give us headaches 😂

[@LVC85costa]

​@@daloypolitsey6006TBH if you could get svg into Ae you could swop out Illustrator for something with a perpetual license or even free. Yes it remains useful beyond this, but it's one of the things stopping people from switching.

[@King-mj2bn]

This isn't how to "import SVG" into AE. This is how to "convert SVG to AI," which is pointless if you need transparency.

[@virtuexperience]

Absolutely

[@jirehla-ab1671]

​@@virtuexperienceany fix for this?

[@fallogingl]

This was the only method I could find to import the SVG of graphs exported from Python to work as a shape layer in AE thank you!

[@louielee3583]

4:35 Small tips: You don't need to select the Vector Layers one by one.
After creating the Shape Layers, all Shape Layers are selected by default, so you could simply drag them into the end and release. After that, all Shape layers should be separated from the Vector Layers. So you could select the first Vector layer, hold shift, select the last Vector layer, then remove all vector layers at once.

[@happyraintf]

In fact, you can just delete the imported layers folder all-together and only the vectors will be left.

[@jirehla-ab1671]

​@@happyraintfcan you still morph or edit the svg in after effects?

[@eltv7536]

Thanks!

[@editin232]

The "O" is back to being filled at the end.

[@Xoldomir_KO]

Сделал видео в шейпах полсностью в АЕ, далее конвертировал в демо, HTML файл отлично крутится. Но как вывести с анимацией в SVG? данный конвертор сайт не выдает анимационный вариант только статику.

[@wixlogo]

What's up bro!

[@HastelNox97]

pog

[@Fasceyy]

Are you from south africa?

[@Data-io7qe]

I think there is some South African in him, yes.

[@silver_3]

2nd comment (10th view)

[@lionsground]

It requires a huge javascript of + 300kb to use this on your site. Is there no alternative?

[@jasonl122]

Bodymovin now supports export as SVG with SMIL animation.

[@lionsground]

@@jasonl122 thanks will check it out 🦁

[@milos_slav_sky]

while you live in 2K24 adobe lives in 203 BC

[@mozzalifefps4438]

Valorant fps bosst pls

[@TroubleChute]

Already done ua-cam.com/video/K34HtlmN_0I/v-deo.html