How to create an animated SVG (Scaleable Vector Graphic) image for your website 

Let’s start by clarifying why you should use SVG on your website instead of other file formats like JPG, GIF or PNG. From mathematically declared shapes and curves, SVGs are drawn and not from pixels, thus to use it on a webpage you are not restricted to select any particular size. There is a perk to animate SVG images, with quick page loading time, and also supports any combination of colors or gradients with transparency. It gives you the best resolution on any size and with JavaScript and the DOM you can do real-time modifications and even embed SVGs. It supported by all browsers, except IE 9 and lower and old android (V3).

In this blog, you will learn how to create an animated SVG image for your website. Here are the following steps and some software requirements to create an animated SVG

Software Requirements

Adobe Illustrator

Adobe After Effects

BodyMovin (After Effects Extension)

Note:- You should download and install BodyMovin extension manually for After Effects before the whole process.

Steps to create an animated SVG

Step 1: Prepare the vectors in Adobe Illustrator

The very first step begins by creating an image into separate layers using adobe illustrator. You can create vector layers of your image manually as per your thoughts/imagination or prototype drew on paper. You can also download AI or EPS format vector images from any website through an illustrator extension (Like Freepik, Shutterstock and etc.) and can directly be used as an animation.

Step 2: Import, Organize and animate the image in Adobe After Effect

After creating a separate layer vector image in Adobe Illustrator now it’s time to import it into Adobe After Effects. To import your AI/EPS (Adobe Illustrator Extension) file select the import option from the dropdown menu of After Effects and select the Illustrator file that we prepared and click import. Select composition from the dropdown list and give the size, frame rate, canvas color to your composition and click ok. In the timeline panel now see the new composition. And see separate illustrator layers with orange icons to the left of the layer names by double-clicking on new composition. Right-click on the layers and click “Create shape from layers” option and delete the illustrator layers to clean up the clutter. Now give the animation to the individual layers however you want to animate the SVG by using Effects & Presets Options and with the help of Keyframes in After Effects.

Step 3 :- Exporting the animated image into SVG

Thinking to export your animation in SVG format on your website!! But confused and stuck!! Don’t worry I will help you to directly export SVG from After Effects through a simple feature named Bodymovin.

Let’s first learn what actually Bodymovin is all about

BodyMovin (what and why to use)

Now maintain the simplicity of creating a high-quality animation in After Effects in a browser with minimal effects on page speed and a user-friendly experience only through BodyMovin feature.

The future of the web, Android, iOS, and React Native animation world lies in the BodyMovin open source project. Now easily export your compositions into small, robust JSON files through BodyMovin After Effect plugin. Through these plugins render JSON files into HTML5, CANVAS or SVG container in no time. Yes, of course, animation outcomes are light-weight (great for page speed, unlike videos), interact with the DOM, and possess amazing After Effects capabilities. They can be used for navigation, AJAX loading, form validation, micro-interactions, location and maps interfaces, and other activities.

Step 4: How To Export

After completing your animation process in After Effects select Window from the dropdown menu. Select Extension then select BodyMovin from the list of extensions. On the screen, a new panel will appear. Select your destination folder, Select your main composition from the given list, change the settings and click on “Render” button. This process will take a few seconds or maybe a minute it depends on your composition time and how big is your animation. After completing the process go to your destination folder where you can see your animated JSON with SVG. Now open SVG in a browser and check the working.

Conclusion-

I hope the above steps explained are easy to understand and will help you to get the best image for your website in SVG format. As mentioned above SVG images have their own benefits and importance. In case if you have any queries and want to know more please drop your query in the comment section below. Feedbacks are appreciated.