Blog

inkscape is trying to break my heart

Written by Thomas Henderson
Published on 01 September 2017

I overcommitted to a method without sufficient prototyping, and it’s causing me problems. At issue is – I think – some default choices that Inkscape makes when handling SVG. But it could also be a problem with how my original artwork got rendered into a PDF, or, it could just be a failure of understanding on my part.

Let me back up. I was assigned to read a book called Understanding the Four Rules of Simple Design, and create a presentation and blog post on it. This seemed like a good time to try something I’ve been wanting to try for at least a year: creating a sort of DIY Prezi.

The obvious question: why? What’s wrong with Prezi? Nothing’s wrong with Prezi! But SVG is an infinitely scaleable, very mathy format. I want to learn to use the format for data visualizations and for web art, not just presentations. What’s more, vinyl and laser cutters can take SVG as an input, as can printers, opening up a whole realm of possibility for doing off-the-screen graphics. I dream about making rubber stamps out of generative art, or taking a representation of some high-symmetry finite group, turning it into a mask, slapping it on a piece of glass or ceramic or metal, and sandblasting or acid-etching myself some tangible mathematical or math-inspired art. So, although yesterday I did d accuse myself of once again doing everything in the most complicated way possible, I still think it’s been a good experience for learning how to work with the format directly.

While reading I created a giant artboard (27 MB pdf) with notes on the material and my response to it. My vision was of a viewport that would swoop around that image, changing size and position to juxtapose high-level concepts or zoom in on a detail. I did some reading on how to animate the viewport, crossed my fingers that my JavaScript skillz would be up to the task, installed Inkscape, opened up the artboard, and started editing.

After a little bit of tinkering I discovered that objects in Inkscape can be assigned IDs. A-ha! A strategy emerged:

I got pretty into this. I also added a few rectangles labeled, e.g., #transition-3-4, on the theory that it might be useful to have some midpoints for the animations. Finally I had thirty-ish rectangles. What I expected to happen now was,

My theory was that this would get me the ability to advance to the next slide, instantaneously. If everything worked to this point, then I could spend any remaining time on animating the transition over time, and maybe even inserting transitions.

HOWEVER. After hacking on the thing for a while, I finally understood that Inkscape’s coordinate system diverges from the browser’s coordinate system! All the y-coordinates for my rectangles were negative. Also my rectangles had parent <g> elements with a matrix transformation. I tried to write a function to try and do a change of coordinates, but I did not come up with the right one in time, and ended up giving my presentation by haphazardly sliding around the artboard in Inkscape itself. Not bueno.

Here is my final artboard (42 MB svg) as exported by Inkscape. (Note there are a few options for exporting, including “plain svg” and “optimized svg” — but they didn’t seem to be better.) These questions remain: