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. Therefore, older Internet Explorer versions are not shown in these support tables.

Animated GIFs

All browsers can display animated GIFs.

FormatChromeFirefoxSafariEdgeIE11
Animated GIFYesYesYesYesYes

SVG Feature Support

Some SVG features are not well supported by browsers.

FeatureChromeFirefoxSafariEdgeIE11
Blending ModesYesYesYes--
Tracking (letter-spacing)*Yes-YesYesYes
Word Spacing*Yes-YesYesYes
Vertical Text*YesYesPartialPartial-
Multiline Text*-Yes---
CSS Shorthand Filters*-Yes---
Alpha MasksYesYesYes--

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

Safari and Edge 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 Path56+**17+*-
Rotation / Scale / SkewYesYesYes17+-
OpacityYesYesYesYesYes
Fill ColorYesYesYesYes-
Fill OpacityYesYesYesYes-
Stroke ColorYesYesYesYes-
Stroke OpacityYesYesYesYes-
Stroke WidthYesYesYesYes-
Stroke Dash ArrayYesYesYesYes-
Stroke Dash OffsetYesYesYesYes-
WidthYes-Yes--
HeightYes-Yes--
Path Shape53+**----
Filter-Yes---

** Only Chrome 53 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.

* Only Chrome 56 or later supports CSS animation of curved motion paths (CSS 'offset-path' property). There is an export option to write motion paths as CSS transforms, so that they work in all modern browsers.

Only Firefox supports animated CSS shorthand filters.

Safari has a bug, which prevents CSS animations from running for objects inside symbols.

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 October 29, 2018.