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

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

Abhay Dave

16 October, 2019

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 is 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.

Benefits of Using SVG for UI/UX Design Service

SVGs are highly beneficial for UI/UX Design Services as they allow for seamless scalability, lightweight performance, and crisp visuals across different devices. Unlike raster images, they ensure pixel-perfect designs without compromising quality.

Software Requirements

Adobe Illustrator
Adobe After Effects
BodyMovin (After Effects Extension)

Note: You should download and install the 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 drawn on paper. You can also download AI or EPS format vector images from any website through an Illustrator extension (Like Freepik, Shutterstock, etc.) and can directly use them for 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, select the Illustrator file that we prepared, and click import. Select composition from the dropdown list, give the size, frame rate, and canvas color to your composition, and click OK. In the timeline panel, you will now see the new composition. See separate Illustrator layers with orange icons to the left of the layer names by double-clicking on the new composition. Right-click on the layers, click the “Create Shape from Layers” option and delete the Illustrator layers to clean up the clutter. Now apply animations to the individual layers using Effects & Presets Options and Keyframes in After Effects.

Step 3:- Exporting the animated image into SVG

Thinking of exporting your animation in SVG format on your website but feeling confused? Don’t worry, I will help you to directly export SVG from After Effects through a simple feature named BodyMovin.

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 the 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 the BodyMovin After Effect plugin. These plugins render JSON files into HTML5, CANVAS, or SVG containers in no time. Yes, of course, animation outcomes are lightweight (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 map 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. A new panel will appear on the screen. Select your destination folder, select your main composition from the given list, change the settings, and click on the “Render” button. This process will take a few seconds or maybe a minute, depending on your composition time and how big your animation is. 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 its functionality.

Conclusion-

I hope the above steps are easy to understand and will help you create the best image for your website in SVG format. As mentioned above, SVG images have their benefits and importance. If you have any queries or want to learn more, please drop your query in the comment section below. Feedback is appreciated.