[TUTORIAL] Add Animated SVG in Webflow

[cs_miklos (Csenge Miklos)]

Hi Community!

You can add animated SVG icons, illustrations, and business logos to your website in just a few steps.

1. Let’s get started by creating a simple animation with SVGator. SVGator is an online SVG animator tool that doesn’t require any coding skills. (SVG stands for Scalable Vector Graphics. It’s a vectorial image format that supports animation and interactivity.)
   If you need any help getting started, you can find step-by-step tutorials here.

2. Once you are done, just click on the Export button in the app’s header. Make sure you select CSS only as the animation type and let the animation start when the page loads (On load).

3. Because it’s not an interactive SVG, you can add it to Webflow’s assets panel and drag it into your project.

4. If you set the animation to start on mouse over, just open the file in a text or code editing tool. Make sure that you select all the code and copy it to your clipboard. The code should look similar to this:

5. Next, in Webflow, go to the Add panel and drag an Embed element into your canvas from the Components section. You can also use quick find (CMD/CTRL+E) and type embed. Paste the SVG code from the clipboard here.

Notes:

• The animation will not be visible in the project edit mode, only after you publish and preview the website in the browser.

• More interactive options and advanced animations can be achieved if you export JavaScript as the animation type. Unfortunately, it’s not possible yet to add this type of animation to Webflow’s interface as the code’s length exceeds the 10,000 character limit for embedded codes.

Happy animating!