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:

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:

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:

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

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:

The following parameters apply to sprite sheets only:

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:

These parameters apply to animated PNGs, image sequences and sprite sheets:

These parameters apply to sprite sheets:

JPEG

The JPEG format has these parameters:

These parameters apply to image sequences and sprite sheets:

These parameters apply to sprite sheets:

WebP

The WebP format has these parameters:

These parameters apply to animated WebPs, image sequences and sprite sheets:

These parameters apply to sprite sheets:

Animated GIF

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

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:

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:

Sharing

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.