svg animation

Create a new SVG animation now!

New project

Export settings

You will find the export options by clicking on the gear icon on the top right side of the interface or, in case you forgot to choose settings there, you will see the same options right before you would export the file.

export settings

Please note that you will have to click on the Preview button or to Export the file to actually see how these settings work:

export settings

The animation type is one of the most important things to select. You can choose between JavaScript and CSS. The difference is that CSS doesn’t support all animators and JavaScript does. Please see compatibility table for more information.

Next, you can decide how the animation starts after you export it from SVGator. For a bit of interactivity and engagement, you can start the animation on mouse over or even on click. In case you would like to start the animation on click, you will have to export JavaScript.

You will find two different document options, Fixed size and Responsive.

  • Fixed size means that we will add the width and height properties to the exported file, so you will see only what’s on the canvas during the animation.
  • Responsive means that we will not include width and height properties in the code, so you will export the animation as it is, even with the elements in the grey area that are not on the canvas.

You can find additional options to control how the animation works after the export here:

export settings

Set the direction first. It can be Normal or Reversed. Reversed means that the animation you've created will be played backwards after you export it. To use the Alternate or Alternate reversed options you must set the Iterations to Infinite or Count number to more than 1.

Alternate means that your animation will be played normally first and then backwards. Alternate reversed means the same thing, but it will be played backwards first and then normally.

Choose the number of times the animation will be played. Pick Infinite to export the animation with an infinit loop or pick the Count number to set how many times the animation will be repeated.

If you would like your animation to stop as your animation should end normally then pick Fill mode -> Forwards. If you would prefer it to stop on first keyframe - as it looks before the animation would start - set Fill mode -> Backwards.

As mentioned above, please note that you will have to export the file or to click on the preview button in the top right corner to actually see how these options work:

export settings

More articles:

Change canvas size

Exported file format

Create an interactive SVG

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