How to ensure your Illustrator files are compatible with the “Interactive SVG” template

When exporting SVG files from Adobe Illustrator to be used in our Interactive SVG template, there are a few things worth considering to make sure the files work perfectly in the Flourish app.

1

Group your elements into layers and add sensible names to them. These layer names will be the IDs that you need to input in the Data tab to reveal information about specific sections of the diagram. In this example, every circle has its own unique layer. Make sure that your artboard only includes elements that you want on the final visualization.




2

To export the file as an SVG, go to File > Export > Export as. This will open a new dialogue box where you can select SVG as an option. Tick the Use Artboards box and select the range you want to export.




3

Once you do this, another window will open with more exporting options. In here, you need to look out for two things:

• Under Font, select Convert to outlines. This will ensure that your font is preserved when you import the SVG file to Flourish.
• Under Object IDs, select Layer Names. This will ensure that the IDs are the names you’ve given your layers.



4

Import your SVG file into Flourish and add the IDs to the Data tab.