Add animated SVG to Editor X

add SVG animation 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.

Export SVG animation

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.

SVG animatio to EditorX

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.

SVGator Export Options

2. Add an iFrame to your site

Click the Add icon on the top of the Editor, click QUICK ADD and select IFrame.

Iframe Editor X

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.

Add SVG to Editor X

It should look like this:

SVG animation code

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.

EditorX SVG animation

Press Edit Code on the top left, and replace the code from the first animation with the SVG code from your second animation.

Animation to editor X

All you have to do now is hit preview and enjoy your animation.

editor X preview animation

More articles:

Add animated SVG to your website

Add animated SVG to Squarespace

Add animated SVG to WordPress

Still got questions? Send us an email to and we will get back to you as soon as we can.