Automating illustrator with enlive
I’ve just finished a small project where I had to generate a batch of graphics from data. This was a collaborative project where many people were involved in designing the outcome and so the manual approach of copying and editing was not attractive.
This is a difficult judgement to make in advance. At what scale does the immediacy of a graphics editor give way to the need for automating batch production? To give you an idea, this project needed to generate 50 graphics which could be clicked through in a stop-motion animation manner. A configuration file containing about 100 numbers and strings was sufficient to generate all the graphics from a single template.
My first approach was to program SVG generation directly. This worked fine but cut me off from any ability to use a graphics editor. When revisions came in, it felt like the job had to be done again.
My second approach aimed at preserving the ability to edit the graphic template. For this I used Adobe Illustrator, exporting the results to SVG for batch transformation by a clojure program that used the enlive library.
The transformation code was easy to write, easy to test, and worked well. However the quirky behaviour of Illustrator SVG export made the whole experience rather unpleasant. Illustrator is definitely the weak component in this chain. The main reason to write this blog is that I want to capture the problems — which are all just about avoidable — before I forget them.
Problem 1: Illustrator scripting is unusable
In principle I could have used the scripting support provided by illustrator — the ExtendScript Toolkit — which allows scripting in javascript, applescript or visual basic. This turned out to be unusable. The ExtendScript editor is a Flex application which takes 2 or 3 seconds to think about every entry you make. It’s impossible to avoid because it’s the only way to make a direct connection to a running copy of illustrator. Using an external editor requires you to quit and restart to test. Not fun.
Solution:
Find a different way.
Problem 2: SVG export is quirky and buggy
Most of my parameterisation rewrote SVG texts. I dutifully went through them all in illustrator naming the layers in which they resided. I exported to SVG with the File > Export > Export As command, checking the box to export layer names as object ids. Provided you succeed in choosing unique layer names — not so easy as it turns out — this appears to work.
However text layer names do not export their object ids consistently. They just don’t always appear in the SVG. You can get around this by placing the text inside a group and naming the group layer. Group names do export to ids properly.
If you name two layers the same, the first will export the layer name. The second will append a number to the layer name and export that as an id. The original layer name will appear in a data attribute. It would be helpful if the data attribute always appeared — but it is missing from the first exported id.
Solution:
Put any text layer you need to address with an id in a group and export the group with a unique layer name. This works consistently, and enlive can then select the text easily.
Problem 3: Kerning
Fonts such as the default Myriad Pro are kerned by illustrator. When exported to SVG, the resulting text elements contain a mess of character-level translated tspans that are really hard to process.
Solution:
Use a generic (non-pro) font which illustrator does not know how to kern. Open Sans or Arial both work fine, and I am sure there are many other options.
Problem 4: Clipping
The data visualisation I was generating contained rectangular clipping paths to colour an arrays of icons. They looked like this:
It appears to matter how these clipping groups are created in illustrator. Create them using editing commands such as duplicate, copy, ungroup, and you are likely to trigger a memory leak somewhere. The first sign will be that the file goes into an ‘edited’ state without any edits having been applied. A ‘*’ appears in the tab title half a second after you save the fie. Later, illustrator switches off undo/redo functions. Later still, it crashes with an out of memory error.
Solution:
Try to avoid clipping. If you can’t, keep it simple and keep an eye on the early indicators of an issue arising. Save often.
Problem 5: SVG import messes up clipping
Given the above problems I started to think that I should make some edits in the exported SVG and only import into illustrator when I really needed the freedom of a graphic design tool. Unfortunately clipping paths break illustrator SVG round-tripping:
Solution:
Don’t round trip SVG. Keep the master file in Illustrator, but keep an eye on the issues above.
Conclusion
This should have been a whole lot easier than it was. I still need to find a better way to do this kind of thing. Perhaps this is a case where Inkscape would work better? Perhaps you have your own solutions? If you do, please comment below and let me know!
