Skip to main content

Export

The Export Button allows you to save your designs in various formats, such as Animated, Static.

Access the Export Tool from the toolbar, and select the desired Animation, format, animation type, and frame rate. Advanced options, such as transparent backgrounds or optimized file sizes, ensure your designs meet the required standards. This tool is essential for finalizing and sharing your work in professional-quality outputs.

Supported Formats

  • Animated SVG files using
    • JavaScript
    • CSS
  • Static SVG files
  • Image files in the following formats
    • PNG
    • JPEG
    • GIF

Exporting to SVG format​

SVG files are files that contains vector based graphics suitable for web.

SVG images can thus be scaled in size without loss of quality, and SVG files can be searched, indexed, scripted, and compressed.

SVG Files can be exported as static or animated. If you choose the static option, you can select the time you wish to export.

Select Tool

If SVG is exported as animated there are 2 options:

  • JavaScript
  • CSS

JavaScript format support all available features. CSS may be a good choice fpr simple animations, but if you'll need more complex animations, interactivity then JavaScript option will be the best option.

Select Tool

Selecting the best option depends on various factors.

CSS Animations​

Pros of CSS Animations​

  • Performance CSS animations are typically hardware-accelerated and may perform better than JavaScript animations.
  • File Size CSS animations do not require any additional libraries to be executed, so file size is much smaller.

Cons of CSS Animations​

  • Limited Support CSS does not support all animations that could be created with JavaScript. Also it has limited support for interactivity.

JavaScript Animations​

Pros of JavaScript Animations​

  • Compatibility: JavaScript animations are supported in all modern browsers
  • Interactivity: JavaScript enable additional interactions like mouse interactions, starting animations at runtime.

Cons of JavaScript Animations​

  • File Size: JavaScript animations requires a JavaScript code to be executed in the browser. By default this code is emebeded in the exported file along with animation configurations. This makes files larger than the CSS option.
  • Performance: In most cases, in modern browsers, the performance of CSS-based animations is almost the same as JavaScripted animations. However JavaScript is the code that needs to be executed in the browser and browser can't optimize the animations, since there may be some small differences when comparing with CSS animations.
note

When you export SVG files we recommend using JavaScript option as this support all advanced animators and interactive options, such as mouse events.

note

When you choose any of the above static formats, you can select the time you want the export to be generated.