Flow 1.6 – The Big SVG (Beta)

Sep 17, 2019・Travis

The release of version 1.6 opens up some major avenues for working with Flow… Namely, for all you lovely people who don't work in Sketch, you now have an opportunity to animate with us. You can export your designs to SVG and drop those right into Flow.

Why SVG?

Not only is it an extremely common format, but exporting an SVG file is table stakes for any design tool with its skin in the game. So, our major motivation for this feature is that it cracks open the potential for anyone not working in Sketch to use Flow.

Many Requests

Over the past few months we’ve had a lot of requests for handling import from a variety of different tools, like XD, Figma, and Affinity Designer. To cover a baseline for all of those we decided that importing a common format that they can all create would be the best first step forward, and we look forward in the future to having custom imports for each format.

SVG Export

This work also provides a foundation for exporting animated SVG files from Flow itself. A tricky task, since the SVG format – while wide open – can be quite temperamental and often restricted in the structure of how things can be animated. Getting a fully 1:1 export with the high-fidelity work you can do in Flow actually requires that we build out a few other features before we can properly export animated SVG files.

Importing

You can easily create a new timeline from an SVG file.

Creating an SVG from Affinity Designer, and importing that into Flow.

You can also import one, or many files at the same time via the menu.

Using Illustrator to generate a few SVGs and then drag and drop them into Flow.

You can also create new timelines from the Stage of a new project.

We call this release a solid “beta” of the SVG import feature. It covers a huge range of basic and complex file types. But, given that the SVG format is so wide open, it doesn’t cover every programming style and structural nuance. If you’re interested, have a read below.

Exporting SVGs for Flow

Let’s get one thing straight: not even Illustrator properly imports all SVG formats and styles. So, let’s have a look at current restrictions and how best to export from other platforms.

Shapes work.

A banal statement, maybe, but crucial for understanding what might be going on when your designs don’t look accurate. When you import an SVG file, we properly handle:

<path>
<rect>
<circle>
<ellipse>
<line>
<polyline>
<polygon>
<svg> (yes, you can embed svgs in svgs)

Importing shapes allows you to work with all kinds of logos, icons, basic background elements, and more.

We’re already working on images, text, and all manner of other important tags, types, and SVG element styles.

If you want to know exactly what Flow handles, check out our SVG Compatibility doc.

Inline Styles Please

Actually, we’re not asking… Inline styles are the only way to ensure your designs can be imported properly. Since there are many ways of writing CSS, the format for non-inline styles can vary widely.

Instead of pouring our effort into covering all ranges for how people (or tools) may write style sheets for their SVG files, we’ve opted for a simplified approach that will only handle inline styles.

This is lovely:

<svg id="Layer_1" width="105" height="105" viewBox="0 0 105 105">
  <circle cx="52.5" cy="52.5" r="50" style="fill: blue;stroke: #fd0178;stroke-miterlimit: 10;stroke-width: 5px"/>
</svg>

For most tools (e.g. Illustrator) it’s easy to choose the inline setting and export your designs.