Animated SVG Compatibility
The most up-to-date list of properties that Flow exports (and soon will) to animated SVG files.
Our aim is to get as much flexibility in export as possible from Flow. To reach some platforms we currently don’t support, we’ve introduced our new animated SVG export. Have a look at our Blog Post to learn more about Animating for SVG Export.
LEGEND
Animatable.
Non-Animatable.
Not Currently Implemented.
Broken… We’re looking into it..
Notes
There are a couple of things to remember when animating for SVG output.
- You can’t have offset and overlapping width and height animations.
- We only export properties and animations that Flow handles. If it’s in the SVG spec, but not here, we don’t have plans to implement it, yet. For example: ripple effects.
Layers / Groups
| Property | Chrome | Safari | FireFox |
X |
|||
Y |
|||
Width |
|||
Height |
|||
Anchor Point X |
|||
Anchor Point Y |
|||
Rotation |
|||
Opacity |
|||
Background Color |
|||
Border Width |
|||
Border Color |
|||
Border Radius |
|||
Shadow Color |
|||
Shadow Radius |
|||
Shadow Offset X |
|||
Shadow Offset Y |
|||
Flip Horizontal |
|||
Flip Vertical |
Shapes
| Property | Chrome | Safari | FireFox |
Path |
|||
Fill Gradient |
|||
Fill Image |
|||
Fill Color |
|||
Stroke Color |
|||
Stroke Width |
|||
Stroke Start |
|||
Stroke End |
|||
Miter Limit |
|||
Line Cap |
|||
Line Join |
|||
Dash Pattern |
|||
Dash Pattern Offset |
Text
| Property | Chrome | Safari | FireFox |
String |
|||
Font |
|||
Font Size |
|||
Font Color |
|||
Text Alignment |
|||
Truncation Mode |
Images
| Property | Chrome | Safari | FireFox |
Image |
|||
Content Mode |
Groups
| Property | Chrome | Safari | FireFox |
Mask Path |