Graphics old and new
September 6, 2015 at 12:04 AM by Dr. Drang
As will be clear before this post is done, I am not an artist and I don’t think like one, but last night I decided to take a stab at making an SVG version of my snowman avatar. Eventually, I ended up using several graphics tools and had both an initial version of the SVG and an animated GIF of it zooming in and out in Safari.
(Click image to rerun animation.)
Although some of the things I did may be useful to me in the future, I certainly didn’t go about the process in the most efficient way, so this post is going to document both things to do and things to avoid.
The impetus for this was John Siracusa’s discussion of his SVG adventures on a recent Accidental Tech Podcast episode. The Pinned Sites feature in the next version of Safari is going to use SVG files for the icons, so John wanted to make an SVG version of his Hypercritical logo to have ready. Sounded like a good idea to me.
While the SVG format allows for raster images, that’s really not in keeping with the spirit of Scalable Vector Graphics. Since my current favicon comes from a photograph, I’d have to recreate it as a vector image. I do most of my drawing in OmniGraffle, so I fired it up, imported the snowman image, and began tracing a simplified version in a layer above it. The result, with the photo layer made invisible, looked like this:
I’m not too happy with the hat, and I’m not sure if I’m going to add the scarf or not, but it’s a start.
The problem was I forgot that OmniGraffle can’t export SVG files. The Pro version can, but I didn’t think a stupid website icon justified the cost of the upgrade. (Although now that I’ve looked at the Pro features more carefully, I’m thinking I should upgrade.)
I do, however, own iDraw. iDraw is actually quite a good app, and I use it often to clean up PDFs of plots that I’ve made in Matplotlib, but because I’ve been using OmniGraffle for so long, iDraw usually isn’t the first app I think of. I need to change that.
Luckily, I was able to make the SVG through a sort of bank shot: I exported the snowman head from OmniGraffle as a PDF, then opened the PDF in iDraw and exported it as an SVG.
To test whether the SVG export really worked, I opened it in Safari and started zooming in and out to see how it looked. It looked sharp at every zoom level, as it should.
This got me thinking about making an animated GIF of the zooming. I resized the Safari window so the head would just fit at the highest zoom and made a series of ten screenshots of the window, one for each zoom level, using my SnapClip utility and pngpaste, a neat little program from Jerry Chen that does for PNG images what pbpaste does for text.
This left me with 10 PNG files, snowman01.png through snowman10.png. Of course, animated GIFs can’t use PNGs, so I used sips to convert them all at once:
sips -s format gif snowman*.png
This converted the format without changing the file names, but a quick run through Better Rename changed all the extensions from .png to .gif.
There are lots of tools for making animated GIFs from a series of images, and if I were going to be doing this sort of thing on a regular basis, I’d do a little research and buy one of them. But since this was a one-off, I just used Preview. I opened snowman01.gif, made the thumbnail image visible, and then dragged snowman02.gif through snowman10.gif from the Finder and dropped them on top of the snowman01.gif thumbnail.
This turned snowman01.gif into a ten-frame animation. I then dragged and dropped them all again, but in reverse order, after the tenth frame to make the zoom-out part of the animation.
Now I had the frames I wanted, but the animation was too fast. I needed to lengthen the delay between frames to make it look more like someone hitting ⌘+ or ⌘- again and again. The convert command from the ImageMagick suite, which I’ve installed via Homebrew, did the trick:
convert -delay 50 snowman01.gif snowman-zoom.gif
The -delay parameter is the time between frames in hundredths of a second, so this command put a half-second delay between frames.
All told, I used eight programs—OmniGraffle, iDraw, SnapClip, pngpaste, sips, Better Rename, Preview, and convert—to create two files: a (relatively) modern SVG and an ancient GIF. This is not a workflow I recommend, but it is nice to know how to use the tools you have at hand.
Update 9/6/15 9:02 AM
Via Twitter, I was reminded by Peter that Better Rename is overkill for the simple job of changing the extension of a file—as of Yosemite, that can be done directly in the Finder. He’s right. I reached for Better Rename for two reasons:
- I’ve been doing some complicated renaming lately, jobs that are well suited to Better Rename’s multistep design and immediate, nondestructive feedback.
- I’ve been using the Finder for 30 years and batch renaming has been available only since last fall. When I think about quickly renaming a bunch of files, the Finder is the last thing that comes to mind.
The first thing that comes to mind Larry Wall’s rename script, which I first saw in the second edition of Programming Perl. Unfortunately, I was persuaded a few years ago to replace Wall’s simple little script with another rename that’s more capable but also more complex. As a result, I no longer feel confident that I know what rename is going to do, and I haven’t used it in ages. I need to go back to the simpler rename; when you’re already at the command line, there’s nothing faster.
