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.
| Format | Chrome | Firefox | Safari | Edge | IE11 |
|---|---|---|---|---|---|
| Animated GIF | Yes | Yes | Yes | Yes | Yes |
| Animated PNG | 59+ | 3+ | 8+ | 75+ | - |
| Animated WebP | 32+ | 65+ | 14+ | 18+ | - |
SVG Feature Support
Some SVG features are not well supported by browsers.
| Feature | Chrome | Firefox | Safari | Edge | IE11 |
|---|---|---|---|---|---|
| Blending Modes | Yes | Yes | Yes | 75+ | - |
| Tracking (letter-spacing)* | Yes | 73+ | Yes | Yes | Yes |
| Word Spacing* | Yes | 73+ | Yes | Yes | Yes |
| Vertical Text* | Yes | Yes | Partial | 75+ | - |
| Multiline Text* | - | Yes | - | - | - |
| CSS Shorthand Filters* | 89+ | Yes | - | 89+ | - |
| Alpha Masks | Yes | Yes | Yes | 75+ | - |
* 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.
| Feature | Chrome | Firefox | Safari | Edge | IE11 |
|---|---|---|---|---|---|
| Animations | Yes | Yes | Yes | Yes | Yes |
| Interactivity | Yes | Yes | Yes | Yes | Yes |
| Pointer Enter | 55+ | 59+ | 13+ | 12+ | Yes |
| Scroll Into View | 58+ | 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.
| Property | Chrome | Firefox | Safari | Edge | IE11 |
|---|---|---|---|---|---|
| Straight Motion Path | Yes | Yes | Yes | 17+ | - |
| Curved Motion Path* | 56+ | 72+ | 15.4+ | 75+ | - |
| Rotation / Scale / Skew | Yes | Yes | Yes | 17+ | - |
| Visibility | Yes | Yes | Yes | Yes | Yes |
| Opacity | Yes | Yes | Yes | Yes | Yes |
| Fill Color | Yes | Yes | Yes | Yes | - |
| Fill Opacity | Yes | Yes | Yes | Yes | - |
| Stroke Color | Yes | Yes | Yes | Yes | - |
| Stroke Opacity | Yes | Yes | Yes | Yes | - |
| Stroke Width | Yes | Yes | Yes | Yes | - |
| Stroke Dash Array | Yes | Yes | Yes | Yes | - |
| Stroke Dash Offset | Yes | Yes | Yes | Yes | - |
| Radius | Yes | Yes | Yes | Yes | - |
| Width | Yes | 69+ | Yes | 75+ | - |
| Height | Yes | 69+ | Yes | 75+ | - |
| Path Shape** | 53+ | 97+ | - | 75+ | - |
| Filter | 89+ | Yes | - | 89+ | - |
| Interactivity | 84+ | 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.