Add animated SVG in Webflow
Webflow's powerful features will make it easy for you to create aesthetically pleasing and responsive website designs without any coding skills. Add stunning SVG animations exported from SVGator and you will unlock a whole new level of creativity!
Find out how it works below.
1. Animate an SVG icon, illustration, or logo in SVGator. Once you are done, just click on the Export button in the app’s header:

2. In the Export panel, make sure you select CSS only as the animation type and let the animation start when the page loads (On load):

3. In Webflow, go to the Assets panel, click on the Upload icon, and select the animated SVG that you just exported from SVGator:

4. You can see that the SVG animation is already animated in the preview thumbnail.

5. Now you can simply drag it into your Webflow project where you can edit its properties in the same way as for regular images.

Insert interactive SVG animation- animate on mouse over
1. Before exporting the SVG from SVGator with CSS as the animation type, set the animation to start on mouse over. You can also set the animation to reverse, restart, or pause on mouse out.
2. 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:

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

4. You can paste the SVG code from the clipboard here and click on the “Save & Close” button.

5. The animation will not be visible in the project edit mode, only after you publish and preview the website in the browser, where the animation will start on mouse over.

6. This is how the preview looks like in our case.

Notes:
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.
Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.