Export settings

To find the export settings of your project, click on the Export button in the top right corner of the application.

svg export settings

You can also view here how these options actually work using the preview window on the left side of the export panel. Don't forget to Refresh the preview if you make changes.

svg export settings

You can export a static SVG even if your file is already animated. It will export the file without any animation attributes. If you need the animated version, then 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.

By clicking on the Save button on the bottom, you will apply the changes made on the project or you can choose to export the animation right away with the export options selected.

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

svg export settings

You can also set a direction for your animation, 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.

To choose the number of times the animation will be played, pick Infinite to export the animation with an infinite loop or pick the Count number to set how many times the animation will be repeated.

svg export settings

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

To control the speed of the animation, you can set the Speed percentage value to a lower value in order to slow down the exported animation or to a higher value to speed up the animation.

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

svg export settings

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.

More articles:

Change canvas size

Exported file format

Create an interactive SVG

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