How To Import SVG Files Into After Effects

Adobe After Effects CC 2024: How To Import SVG Files

This tutorial will show you how to import SVG (Scaleable Vector Graphic) Files into Adobe After Effects CC 2024 via Adobe Illustrator.

Workflow:
Download SVG File
Open in Adobe Illustrator
Convert all to Layers
Rename Layers
Save As Illustrator (.ai) File
Import .ai File as ‘Composition-Retain Layer Sizes’ in After Effects
Double-Click Composition to view all layers

SVG stands for Scaleable Vector Graphic.

Free SVG Files:
SVG Repo

———————
To try or buy Adobe After Effects CC 2024:

Terrapin Textures Video Assets:

⭕️ Check out my new Domestika Course on Adobe Audition:

Murphy Doodle Font:

——————

Chapters:
00:00 Intro: About The Tutorial
00:29 What Are SVG Files?
00:55 Download SVG File (SVG REPO)
01:21 Open SVG in Adobe Illustrator
01:46 Release To Layers (Sequence)
02:22 Rename Illustrator Layers
02:49 Save As Illustrator File
03:12 Import To After Effects
03:43 Open SVG Composition
03:56 Fix Vector Resolution Quality
——————

How To Download SVG Files
1. Open web browser
3. Browse collections
4. Click on an SVG Graphic
5. Click on ‘Download SVG Vector’ to download to computer

How To Open & Prepare SVG File in Adobe Illustrator:
1. Drag SVG File onto Illustrator application (Macs)
2. Go to the ‘Layers Panel’
3. Click on ‘Layer 1’ in the Layers Panel
4. Click on the Hamburger (3 horizontal lines) in the top right of the Layers Panel
5. Select ‘Release To Layers (Sequence)’
6. Drag all layers outside of Layer 1
7. Delete Layer 1 (select and click Trash Can at the bottom of Layers Panel)
8. Double-click on each Layer to Rename
9. Go to File Menu
10. Click ‘Save As’
11. Change Format to ‘Adobe Illustrator (.ai)
12. Rename File
13. Click ‘Save’
14. Select Latest Version of After Effects
15. Click ‘OK’

How To Import Illustrator (.ai) File into After Effects
1. Open After Effects Project
2. Double-click on empty space in Project Panel to open Import Dialogue Box
3. Select Illustrator (.ai) File
4. Change Import As to ‘Composition-Retain Layer Sizes’
5. Click ‘Open’
6. Double-Click new SVG Composition to Reveal All Layers
7. Drag new SVG Composition into the Main Composition
8. Double-Click SVG Composition at any time to reveal all layers

How To Fix Resolution Quality of SVG in After Effects
1. Right-click on the top of the Layers Panel in the Header Row
2. Make sure ‘Switches’ is checked
3. Double-click to to open the SVG Comp so all layers are visible
4. Select all layers
5. Tick one of the boxes under the * column to ‘Continuously Rasterize’
6. A * should be in the column for all layers
7. Return to the main column
8. Tick the box to add a * next to the Comp for ‘Collapse Transformation’
9. Tap ’S’ for Scale
10. Scale up and the Vector Graphic should be sharp and high-quality!

---------------------------------------------------------------

➜Screencast Software: 

---------------------------------------------------------------

➜ VISIT MY WEBSITE:

➜ SUBSCRIBE TO PODCAST

➜ SOCIAL MEDIA:

Amazon Associates Disclosure:

[lilfroggert]

I couldn't have asked for a better tutorial--thank you so much!

[ksaravan]

Can you do a video showing your process of creating a terrapin texture? Or even just a timelapse?

[tiagopesce]

another problem is he stills pixelated in small icale icons like 24x24 and 48x48px theres any fix for that? since i intent to lottie some animated icons for my UI

[tiagopesce]

only impor as a directory in my project

[thaisgliosci]

You don't show how to import SVG into AE but how convert a SVG to AI file :|