About London Calling

In the fall of 2011, I had quit my job, sold my house and packed a few things in a car. I moved to Vermont to attend The Center for Cartoon Studies. I had been a cartoonist for most of my life, but I wanted to find myself, so to speak, as a cartoonist. James Sturm had built a thriving community centered around the school. I wanted to learn, to put as much work into cartooning as I had in studying graphic design when I was in college.

Enter Ed Emberley

Early in the first semester, Jason Lutes assigned us a project that had to be drawn in the style of Ed Emberley. It was to be our first assigned mini-comic of any substantial length. When I was a kid, I used to love pouring through Emberley’s Big Orange Drawing Book, so I was thrilled. Emberley has created a visual language where someone at any skill level is able to draw nearly anything out of a handful of shapes and lines. We were to use the Make A World Drawing Book as our guide.

Ed Emberley's Drawing Book: Make a World

The experience was incredibly satisfying and artistically liberating. Making comics had been something of a slog for me before I arrived at CCS, and this project let me toss aside my cartooning hangups and just create! I didn’t worry about style, or whether it should be done in a brush or a nib. In fact, I did the whole comic in one entire day in October, listening to the Phillip Glass soundtrack for the original Dracula on repeat. It was maybe the most fun I had creating comics in years.

Experimentations

Since drawing like Emberley is so simple and fun, I suspected that my classmates were going to take the opportunity to experiment with the form of their comics and also with abstract narrative techniques (which they did, but you’ll have to bug them to see what they did). For my part, I wanted to create my comic entirely in Adobe Illustrator, thinking vaguely down the road that I would like to experiment with either SVG or the new HTML5 Canvas specifications and try my hand at displaying online comics slightly differently.

Flash forward to August 2013: I graduated in May with my MFA in Cartooning, and I moved back to Omaha. While searching through the online job listings, I saw an article talking about the renewed interest in SVG for responsive web design and the upcoming onslaught of retina displays. And then I remembered London Calling.

I cracked open Coda and Illustrator simultaneously…

Implementation

Originally, I had been working with exporting my Illustrator files as SVG, but once I saw how no one seems to agree with how to embed them into HTML5 cleanly, I switched gears and started researching Canvas.

I found this great plug-in for Illustrator, Ai>Canvas, created by the MIX Online Lab. The Canvas code that it produced was great, and much smaller than my original SVG experiments. And Canvas HTML5 code is easily and semantically clean, making my web standard heart beat with joy. I added all the drawing code in Javascript files and called them separately from the page. It was perfect, until you had to resize the screen.

Theoretically, Canvas should be able to dynamically resize, but you usually have to determine an originating size in your tag. It’s possible to set up Javascript listeners to fire off another script to resize the Canvas for you, but after several attempts at trying to get it to work and reading one discouraging forum post after another, it was time to go back to SVG.

After closer examination of SVG embed techniques, I chose the simplest one: the humble <img /> tag. Many experts warn against embedding SVG with the <img /> tag since most browsers will strip out the SVG upon rendering a page, but only if it has interactivity built into it. For my purposes, these are just simple images, so the <img /> tag would work perfectly in this situation, and it also meant that I could tweak the SVG element with CSS easily.

Unfortunately, the <img /> didn't work on iOS devices. The SVG didn't appear. After several attempts at fixing it, I ended up having to use the <object /> tag. I also had to separate all of my pages (I was originally serving it as one large graphic). On each <object /> tag, I set the width and height to 100%, and also in the SVG code. Don't change the viewport sizes though! Just the width and height values need to be set to 100% in the SVG code.

Results

The good news is that I now have a responsive comic made up of only code and vectors. The bad news? It’s a little over 3MB in size. Ouch. I was able to compress the code a bit using Peter Collingridge’s SVG Optimizer, and decided to try hosting the files over on Dropbox to save my bandwidth.

Overall though, experimenting with both techniques was a lot of fun, and I hope someone out there smarter than me experiments with using either one with their online comics in the future. For my part, I am going to be experimenting with SVG for creating site graphics (check out this article on Smashing Magazine for ideas).