How To Add Animated SVG to Wix

To add animated SVG to Wix, you just need to follow the seven steps presented below:

  1. Export your animation from SVGator as CSS only or Javascript
  2. Open the exported animation in your browser, right-click it, and press View page source or CTRL+U to see its source
  3. Copy the source code of your exported SVG animation
  4. Go to Wix editor and click on the Add elements option from the left sidebar
  5. Select Embed Code and then Embed HTML
  6. Paste the code into the given box and press Update
  7. Press Save and then Preview to see your animation

1. Export your animation from SVGator as CSS only or Javascript

Click on the Export button in the top right corner and choose your export settings. In the example below the animation is set to start on load, on an infinite loop.

Step 1- Export SVG Animation from SVGator - CSS only option
Export SVG Animation - CSS only option

Note: Keep in mind that if you export your animation with Javascript as the animation type, it is recommended to use the external player option.

Step 1- Export SVG Animation from SVGator - Javascript option
Export SVG Animation - Javascript option

2. Open the exported animation in your browser, right-click it, and press View page source or CTRL+U to see its source

Step 2 - View the page source code of your animation
View the page source code

3. Copy the source code of your exported SVG animation

Step 3 - Copy the source code of your animation
Copy the source code

4. Go to the Wix editor and click on the Add Elements option from the left sidebar

Step 4 - Click on the Add Elements option from the Wix sidebar
Click on the Add Elements option from the sidebar

5. Select Embed Code and then Embed HTML

Step 5 - Click on the Embed HTML option
Click on the Embed HTML option

6. Paste the code into the given box and press Update

Step 6 - Paste the source-code of your animation and then click on Update
Paste the source code of your animation and then click on Update

7. Press Save and then Preview to see your animation

Step 7 - Save the changes and then preview the animation
Save the changes & Preview the animation

After upload, the SVG animation will look exactly like in the editor’s preview window.

Final - Preview your SVG animation
Previewing your animation