Help Center
>
Getting Started
>
Add animated SVG in Webflow

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:

webflow svg animation

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):

webflow svg animation

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

webflow svg animation

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

webflow svg animation

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.

webflow svg animation

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:

webflow svg animation

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.

webflow svg animation

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

webflow svg animation

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.

webflow svg animation

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

webflow svg animation

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.