Export and Sharing

You can export the document as an SVG document, an image sequence or a video file. You can also easily share the animation in various sharing services.

New export file formats can be added with plugins.

Exporting

Choose File > Export to open the export dialog. Type in the filename for the exported file and select the export format. The supported formats are described below.

SVG

This format exports an SVG document which has the following parameters:

  • Animation - None, KeyshapeJS, CSS Animation, Image Sequence, or Sprite Sheet.
  • Write SVG 1.1 filters - By default, filters are written as CSS filters so that they can be animated. Selecting this option will write filters as SVG filters for better browser compatibility. However, filter animations will be disabled.
  • Write text as paths - Texts used in SVG documents may not render correctly if the viewing device does not have the correct fonts installed. Also, moving or scaling text may appear shaky because of font kerning. This option converts texts to paths while exporting them to overcome these limitations. Note that this option may increase the file size considerably.
  • Embed Images - Use this option to automatically embed all linked images into the exported file. Note that this option may increase the file size considerably.

KeyshapeJS Animation is the safest way to export SVG animations because it plays on all modern web browsers. It uses a piece of JavaScript code, which animates the SVG document, so that browsers display the animation correctly.

KeyshapeJS has an option to choose the location of the JavaScript library:

  • Embedded - embeds the JavaScript code into the SVG file to make using the SVG file easy.
  • External - writes the JavaScript library as an external file. The external JavaScript file must be distributed with the SVG file.
  • Custom URL - a user defined URL pointing to the KeyshapeJS animation library. This is useful if the location of the JavaScript library is known in advance.

CSS Animations mostly work in the latest web browsers. Browsers still have issues in their CSS animation implementations, so it is always a good idea to test that the animation plays correctly on all browsers. Note that Internet Explorer cannot display CSS Animations. CSS Animations are appropriate for small icon animations, where animation is not critical.

CSS Animations have one extra export option:

  • Write motion paths as transforms - all motion paths will be written as CSS transforms, which will play in all modern browsers (not in Internet Explorer). If this option is unselected, then motion paths are written as CSS offset-paths, which work only in Google Chrome.

KeyshapeJS and CSS Animations play the document play range and can be set to loop it by selecting the following parameter:

  • Loop - play forever or once.

Image Sequence exports a sequence of SVG files.

Sprite Sheet draws all animation frames into a single SVG file.

The following parameters apply to image sequences and sprite sheets:

  • Times - the begin and end times.
  • Fps - frame rate of the exported animation, this affects the amount of exported frames.
  • Use play range times - this uses the play range times as the begin and end times.
  • Use document frame rate - this uses the frame rate of the document as the fps value.

The following parameters apply to sprite sheets only:

  • Algorithm - Single Row, Single Column, or Grid. Use this to choose how frames are packed in the sprite sheet.
  • Sheet Size - if the Grid algorithm is selected, then this describes the fixed size of the sprite sheet. If the sheet size is not large enough to fit all frames, a warning is given.

You should always test the exported SVG files in web browsers to see that they work as intended. Web browsers may miss some features or have bugs that cause the SVG files to display incorrectly.

Note that you cannot open exported SVG files in Keyshape and preserve editing capabilities, such as animation keyframes. It is a good idea to keep the original .keyshape file and make edits to it.

SVG Compressed

This format exports an SVG document compressed with the standard gzip algorithm. Note that if you intend to serve SVG documents from a web server, then usually the web server will automatically compress documents with the gzip algorithm and you should not use this format.

The parameters for this format are the same as for the SVG format.

PNG and JPEG

PNG and JPEG formats can export a single bitmap image, an image sequence, or a sprite sheet. The formats have these parameters:

  • Animation - None, Image Sequence, or Sprite Sheet.
  • Size - the width and height of the exported image. You can use percentages or pixel values. Percentages are relative to the original document size.

These parameters apply to image sequences and sprite sheets:

  • Times - the begin and end times.
  • Fps - frame rate of the document, this affects the amount of exported frames.
  • Use play range times - this uses the play range times as the begin and end times.
  • Use document frame rate - this uses the frame rate of the document as the fps value.

These parameters apply to sprite sheets:

  • Algorithm - Single Row, Single Column, or Grid. Use this to choose how frames are packed in the sprite sheet.
  • Sheet Size - if the Grid algorithm is selected, then this describes the fixed size of the sprite sheet. If the sheet size is not large enough to fit all frames, a warning is given.

Animated GIF

This format exports the document as an animated GIF which has the following parameters:

  • Size - the width and height of the exported image. You can use percentages or pixel values. Percentages are relative to the original document size.
  • Times - the begin and end times.
  • Fps - frame rate of the document, this affects the amount of exported frames.
  • Use play range times - this uses the play range times as the begin and end times.
  • Use document frame rate - this uses the frame rate of the document as the fps value.
  • Loop - number of times the animation repeats. Some GIF viewers obey this parameter, some do not.
  • Dither - Ordered, Diffusion or None.
  • Transparency - select to enable transparent background. The document background also needs to be transparent, otherwise this has no effect.

Animated GIFs can only have 256 colors. If the document has more than 256 colors, then the number of colors is reduced to 256 and the image is dithered. Dithering means that colors are altered to make the image look like it has more than 256 colors. This makes gradients look better, however the image has more grain. These dither methods are available:

  • Ordered - usually the best option for animations, but it may create noticeable pixel patterns.
  • Diffusion - creates good results for a single frame without distinguishable patterns, but may cause a lot of pixels to jitter after animated portions of the image.
  • None - disables dithering, but may cause gradients to show visible banding.

By default, Animated GIFs are exported without transparency, which is usually the right choice when creating GIFs for social media sites. Enabling transparency will create a GIF with a transparent background, if the document background is transparent. Pixels in GIFs can be opaque or transparent, but not semi-transparent. Semi-transparent pixels, such as non-pixel-aligned lines, will become opaque or fully transparent, which often looks bad. To avoid that, only draw pixel-aligned graphics or do not enable transparency.

MPEG-4

This exports the document as an MPEG-4 video using the H.264 codec. This has the following parameters:

  • Size - the width and height of the exported video. You can use percentages or pixel values. Percentages are relative to the original document size.
  • Times - the begin and end times.
  • Fps - frame rate of the document, this affects the amount of exported frames.
  • Use play range times - this uses the play range times as the begin and end times.
  • Use document frame rate - this uses the frame rate of the document as the fps value.

Sharing

You can share the document on Twitter, Mail, Messages, Notes, Facebook, and other services. Choose the desired service under the File > Share menu.

Documents without animation are shared as still images. Note that some services, like Vimeo, cannot share still images.

Animations are shared as MPEG-4 videos at 30 fps, except in the following cases when an animated GIF is used instead:

  • Twitter
  • Messages when the animation's duration is under 10 seconds

If you want to use a different format or frame rate, then export and manually upload the animation to the service.

Note that some services have limitations on the size and duration of animations. After you have shared the animation, check that it has been shared properly.

Copy-Pasting Code

If Copy SVG code to clipboard is enabled in Preferences, then copied objects are stored in the clipboard as plain text SVG code. You can then paste the text into a text editor for manual editing.

You can also copy-paste SVG code from a text editor into a Keyshape document. This feature works even if Copy SVG code to clipboard is not enabled.