How-To

How to export an SVG illustration from After Effects

Quite often, we need to export a single frame from After Effects (AE) and edit it in Illustrator. Illustrator requires vector images, while AE only supports the export of rasters. In this brief tutorial, we’ll show you how to quickly export an SVG image from AE.

What is the standard way of solving this problem?

Before we found the way that we’ll show you below, we used to export the required frames from After Effects to PNG or JPEG and then manually copied them using a graphic editor. That was very exhausting, and the results were not 100% identical to the originals.

Sometimes we did it another way: we exported an animation fragment to HTML or JSON. It was OK for cases when an illustration was intended for posting on a website. But if an image required editing, again, we had to copy it from scratch.

Together with Icons8 team of animators, we were looking for a way to simplify this process, and eventually, we found it.

Alternative way of exporting an SVG file from After Effects

After a series of trials and errors, we discovered the easiest way of exporting SVG files from After Effects. It requires the Bodymovin plugin and an online file converter.

Warning! Before you start, make a backup copy of the project. This will prevent your hair from getting grey after you accidentally save and close the project without keyframes.

1. Delete unnecessary keyframes

Move the playhead to the first frame of the timeline and delete all keyframes.

If you need a frame from somewhere in the middle of the timeline, you should place the keys only on this frame and move them to the beginning of the composition. One property can have one key only.

If you keep unnecessary keyframes After Effects will export any random frame from the project.

2. Check the layers

Make sure that you have no cropped layers. If you do, stretch the layers to the borders of the composition.

Also, disable the layers with Alpha Matte and use a regular mask.

Otherwise, the result might differ greatly from the original.

3. Adjust Bodymovin settings

Install the plugin. In Bodymovin, go to Settings and select the Demo export mode.

Click Save.

4. Export

Select the save path and click Render. The file is saved in HTML.

5. Converting HTML to SVG

I checked dozens of online converters to find the best one for the task: image.online-convert.com is way more accurate and stable at converting files than others. Other services either produce a result that looks very different from the original or fail to convert the file at all.

Open any browser and go to image.online-convert.com. Then go to Convert to SVG.

Upload the HTML file and click Start conversion.

6. Your SVG is ready!

Download the file and make sure that everything is OK. As a rule, you’ll have to adjust the artboard size, as it is often downsized during conversion (for example, an image of 1000×1000 becomes 600×800).

Original (left) and converted image (right)

Conclusion

The described way of exporting SVGs from After Effects saves a lot of time. It helps convert the required frame to vector format with 100% accuracy and without any special skills.

As for limitations of this method, in my view, it’s two things: incompatibility with Alpha Matte and the fact that the artboard size is reduced after export. However, these limitations are nothing compared to the necessity of drawing the whole illustration from scratch.

icons8

Recent Posts

How legendary icons were born

We see tens and hundreds of icons on our computer and phone screens every day.…

15 hours ago

Make Face Generator the Product of the Year

Face Generator is nominated for the Golden Kitty Award on Product Hunt! Your support means…

2 weeks ago

Bad apple design

We've already shown you some weird icon requests. Now it's time to show some challenging…

4 weeks ago

How to design a Christmas Instagram story

Let’s design Christmas and New Year visuals for Instagram stories. We’ll use Lunacy, a 100%…

1 month ago

Meet Fugue 3.0: Fresh music to make your videos a blast

Finding the right music for a video can be challenging. And buying a proper license…

1 month ago

Face Swapper: Swap faces like never before, for free

We've all had enough fun with face swapping. It's time to put jokes aside. Meet…

1 month ago

This website uses cookies.