How to export an SVG illustration from After Effects - rachelfloore

Quite often, we call for to export a separate skeleton from After Personal effects (AE) and edit information technology in Illustrator. Illustrator requires vector images, spell AE only supports the export of rasters. In that brief tutorial, we'll show you how to quickly export an SVG image from AE.

What is the casebook manner of solving this problem?

Before we found the right smart that we'll show you below, we used to export the requisite frames from After Effects to PNG operating theater JPEG and and so manually copied them using a graphic editor program. That was very exhausting, and the results were not 100% identical to the originals.

Sometimes we did it another way of life: we exported an living fragment to HTML OR JSON. It was OK for cases when an illustration was intended for posting happening a site. But if an trope required editing, again, we had to copy it from scratch.

Jointly with Icons8 team of animators, we were looking a way to simplify this work on, and eventually, we found it.

Alternative way of exporting an SVG file from Later on 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.

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

1. Cancel unnecessary keyframes

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

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

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

2. Cheque the layers

Make a point that you have no planted layers. If you do, stretch the layers to the borders of the composition.

Also, invalid the layers with Alpha Matte and use a rhythmical masquerade party.

Otherwise, the result might differ greatly from the original.

3. Adjust Bodymovin settings

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

Click Save.

4. Export

Quality the save path and click Supply. The file is saved in HTML.

5. Converting HTML to SVG

I checkered dozens of online converters to find the best unmatched for the task: picture.online-convert.com is way of life more dead-on and stable at converting files than others. Other services either produce a resolution that looks very different from the freehanded operating theater fail to convert the file at every last.

Open any browser and go to image.online-convert.com. Then run along to Change to SVG.

Upload the HTML file and click Start out conversion.

6. Your SVG is ready!

Download the file and make sure that everything is OK. Eastern Samoa a rule, you'll have to adjust the artboard size, as IT is often downsized during spiritual rebirth (for example, an image of 1000×1000 becomes 600×800).

Groundbreaking (left) and converted persona (rightmost)

Ending

The described way of exporting SVGs from After Effects saves a mete out of sentence. IT helps convert the obligatory frame to transmitter formatting with 100% accuracy and without some 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 nada compared to the necessity of drawing the whole illustration from lucre.

Source: https://blog.icons8.com/articles/how-to-export-an-svg-illustration-from-after-effects/

Posted by: rachelfloore.blogspot.com

Share this post