Add animated SVG to Editor X
You can easily add your animation to your website in Editor X, all you need is to follow the steps below.
In this example, our animation has two parts. The first part should run on an infinite loop in the background (the cat typing), and the second interactive animation part, where the folder opens with a few files popping out, should run only when the viewer clicks on the animation.
1. Export SVG animation
Check your canvas size by clicking on the Canvas element. In editorX you will need to place your animation into iFrames of the same size, or a size of the same proportions.
Click on the Export button in the top right corner of the application and choose your Export settings for the first part of the animation. In the example below the animation is set to run on load on an infinite loop.
Now choose your export settings for the second, interactive part of the animation. Make sure the canvas color is not included in your exported file. Here we set the animation to run on click, and reverse on the second click.
2. Add an iFrame to your site
Click the Add icon on the top of the Editor, click QUICK ADD and select IFrame.
3. Add your SVG animations
Open your animated SVG in a text editor. Copy the SVG code and add it to your HTML block. Use the Enter Code button on the top left. Control your iFrame’s size by using the Size panel on the right.
Make sure the size is proportional to your animation to avoid a scrollbar showing up on the side. An animation exported with the Responsive option will resize to the iFrame’s width. An animation exported with the Fixed Size option will need an iFrame with the same size.
It should look like this:
Select the iFrame where you just inserted the code, click on the 3 dots icon and choose Duplicate. We’ll use this for the interactive part of the animation.
Press Edit Code on the top left, and replace the code from the first animation with the SVG code from your second animation.
All you have to do now is hit preview and enjoy your animation.
More articles:
Add animated SVG to your website
Add animated SVG to Squarespace
Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.