Browser Support for Keyshape Exported Files

These tables show how browsers support various formats exported by Keyshape.

Microsoft recommends using Microsoft Edge, and supports Internet Explorer 11 for backward compatibility only. Older Internet Explorer versions are not shown in these support tables.

Animated Image Formats

All browsers can display animated GIFs.

FormatChromeFirefoxSafariEdgeIE11
Animated GIFYesYesYesYesYes
Animated PNG59+3+8+75+-
Animated WebP32+65+14+18+-

SVG Feature Support

Some SVG features are not well supported by browsers.

FeatureChromeFirefoxSafariEdgeIE11
Blending ModesYesYesYes75+-
Tracking (letter-spacing)*Yes73+YesYesYes
Word Spacing*Yes73+YesYesYes
Vertical Text*YesYesPartial75+-
Multiline Text*-Yes---
CSS Shorthand Filters*89+Yes-89+-
Alpha MasksYesYesYes75+-

* The export dialog has options to write text as paths and filters as SVG filters so that all browsers display them correctly.

Safari can display vertical text with limited support for text orientation.

Browsers may also have other bugs when displaying SVG. You should always test your SVGs on all browsers to ensure that they are rendered correctly.

SVG with KeyshapeJS Animations

KeyshapeJS Javascript animations are supported by all browsers, which can display SVG. It means that Chrome, Firefox, Safari, Edge, and IE9-11 can play them back.

AnimationChromeFirefoxSafariEdgeIE11
KeyshapeJSYesYesYesYesYes

Although animations are supported by all browsers, they still may have bugs related to SVG rendering, so you should test your animations on all browsers.

SVG with CSS Animations

CSS Animations work in modern browsers. Some properties work better than other.

PropertyChromeFirefoxSafariEdgeIE11
Straight Motion PathYesYesYes17+-
Curved Motion Path*56+72+-75+-
Rotation / Scale / SkewYesYesYes17+-
OpacityYesYesYesYesYes
Fill ColorYesYesYesYes-
Fill OpacityYesYesYesYes-
Stroke ColorYesYesYesYes-
Stroke OpacityYesYesYesYes-
Stroke WidthYesYesYesYes-
Stroke Dash ArrayYesYesYesYes-
Stroke Dash OffsetYesYesYesYes-
WidthYes69+Yes75+-
HeightYes69+Yes75+-
Path Shape**53+--75+-
Filter89+Yes-89+-

* Keyshape export option 'Write motion paths as transforms' will write curved motion paths as CSS transforms, so they work in all modern browsers (Safari and the old Edge).

** Only Chrome 53 and Edge 75 or later supports CSS animation of path shape data (CSS 'd' property), but it may use a non-standard syntax. It is recommended not to use CSS path shape animations until issues related to it are resolved.

Safari has a bug, which means that CSS animations inside symbols won't work.

Browsers also have other bugs related to CSS animations. You should always test your CSS animations on all browsers to check that they display properly.

Document History

This page was last updated on April 7, 2021.