Export and Sharing - Keyshape Help

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.
Optimize - Enabling this option will create SVG files with smaller file sizes. These individual optimizations can be enabled or disabled:
- Remove indentation - removes space and linefeed characters.
- Remove XML instructions - disables writing XML instructions.
- Remove comments - disables writing XML comments.
- Merge objects - collapses group elements which are not needed.
- Remove unused resources - removes unused symbols.
- Remove hidden objects - removes objects which are not visible.
- Remove unnecessary properties - removes attributes and CSS properties which are not necessary.
- Remove unused ids - removes ids which are not necessary.
- Shorten property values - optimizes values to be as short as possible, also combines the transform property to path data if possible.
- Decimals - selects the precision for numeric values.
Object IDs - determines how ids are written out to the SVG file:
- Normal - writes the object ids as they are. This is the default value.
- Unique - replaces ids with unique ids to make embedding SVG in HTML files easier.
- Minimal - replaces ids with minimal ids so that the file size becomes smaller.
- Prefix - prefixes all ids with the given prefix. It makes embedding SVG in HTML easier, but keeps the naming predictable so that SVG elements can be referenced from JavaScript.

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.

The SVG code can be copied directly to clipboard by pressing the Copy to Clipboard button in the Export dialog. It makes pasting SVG code to text editors more convenient than exporting to a file and copy-pasting from the file.

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

The PNG format has these parameters:

Animation - None, Animated PNG, 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 animated PNGs, 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.
Loop - loop count for animated PNGs.

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.

JPEG

The JPEG format has these parameters:

Animation - None, Image Sequence, or Sprite Sheet.
Quality - the quality value for lossy compression. Smaller values create smaller files but also reduces quality.
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.

WebP

The WebP format has these parameters:

Animation - None, Animated WebP, Image Sequence, or Sprite Sheet.
Quality - the quality value for lossy compression. Smaller values create smaller files but also reduces quality.
Lossless - enables lossless WebP output.
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 animated WebPs, 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.
Loop - loop count for animated WebPs.

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.

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

Animations are shared as MPEG-4 videos at 30 fps, except when sharing in Messages. For Messages, the animation is shared as an animated GIF if its duration is less than 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 Settings, then copied objects are automatically stored in the clipboard as plain text SVG code. You can then paste the SVG code as text into a text editor for manual editing.

Another way to copy SVG code to clipboard is to use the Copy to Clipboard button in the Export dialog.

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