Browser Support for Keyshape Exported Files

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

Note: Microsoft has permanently disabled Internet Explorer 11 (IE11) on Windows 10 and recommends using Microsoft Edge instead. The Internet Explorer 11 desktop app is not available on Windows 11.

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. Interactivity (pointer and scroll events) are available in the recent browser versions.

FeatureChromeFirefoxSafariEdgeIE11
AnimationsYesYesYesYesYes
InteractivityYesYesYesYesYes
Pointer Enter55+59+13+12+Yes
Scroll Into View58+55+12+16+-

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 are supported by modern browsers. Some properties have better support than other.

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

* Keyshape export option 'Write motion paths as transforms' will write curved motion paths as CSS transforms, so that they play correctly on older browsers.

** CSS path shape animations have some open W3C issues, see #320 and #374.

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 January 16, 2024.