Over the last few months I’ve created a few interactive infographics (here, here, & here) using a combination of SVGs (Scalable Vector Graphics) created in Adobe Illustrator and some pretty basic Javascript. The goal was to find a way to create interactive infographics for those cases where; 1) D3.js may not be a good solution because the infographic is mostly illustration-driven rather than being data-driven, and 2) a method that would be more amenable to designers and non-programmers.

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. 

Basic Process Overview for Creating an Interactive Infographic with Adobe Illustrator and Javascript

The basic process is pretty straightforward:

  1. Create your illustration in Adobe Illustrator.
  2. 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.
  3. Export an SVG file by selecting File > Save As > SVG.
  4. Create a separate HTML file that references your SVG file.
  5. Include some simple Javascript to handle actions when the user rolls over or clicks an element in the infographic to display a dialog box or modal window with more details.

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

While creating interactive infographics with Illustrator SVGs and Javascript is a reasonable option in a lot of cases, there are some limitations and caveats to consider.

If your illustration has many nodes/buttons to click on, roughly more than 10, it can start to get unwieldy to work with in the html file’s Javascript. In my initial versions I used pop up dialog boxes that are defined in Illustrator and hidden then made visible when its corresponding button is clicked. If you have a lot of clickable buttons and corresponding dialogue buttons then your Layers palette in Illustrator will start to get a bit unwieldy as well.

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.


So what’s the takeaway from this? Creating interactive infographics using Illustrator-generated SVG files + Javascript + Bootstrap is a good option for designers who are moderately comfortable learning some basic Javascript and the BootStrap framework if the illustration has only a few, ~ 10 or less interactive buttons, and modals/diaglog popups.


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.