Note: This is not intended to be a tutorial on how to create an interactive infographic in Adobe Illustrator, but rather a look at what’s involved and how good the option is.
The basic process is pretty straightforward:
- Create your illustration in Adobe Illustrator.
- Any elements that you want to attach interaction to need to be in a group and need to have a unique ID. So each group should be given a unique name in your Layers palette.
- Export an SVG file by selecting File > Save As > SVG.
- Create a separate HTML file that references your SVG file.
Though the basic process is simple, there are a few twists that can complicate things a bit. More about that below. More details about the process are covered in a previous blog post.
Here’s a few screen shots to help illustrate the basic steps outlined above.
Limitations, Pros & Cons
In my most recent versions I’ve started using Bootstrap and modal windows rather than using pop up dialog boxes defined in Illustrator. This makes the Illustrator file much easier to work with and also result in a smaller SVG file size. But a lot of different click points and modal window interactions will also result in your HTML code grow rapidly and this could be troublesome for designers not comfortable with JS or Bootstrap.
The biggest issue by far with this technique is that Illustrator has a nasty habit of renaming some of your carefully named groups/IDs when you export/save the SVG file. This can get very frustrating. If you’re testing and finding that when you click on one of your buttons and not dialog or modal window opens, this is the likely reason. The workaround is to open up the SVG file and find what Illustrator has renamed it and then either rename it in the SVG file or rename the ID of the object in your JS. The downside of this is that it requires mucking about in your SVG file and might be more coding-oriented than some designers are comfortable with.
Hat tip to Tom Germeau for his nice tutorial about creating interactive prototypes with Illustrator that got me started on this as an option for interactive infographics. Check it out to learn more details.