Generating scalable, stretchy, and smart graphics with ColdFusion – Part 1

This is the first part in a series of posts about an alternate method of generating graphics with ColdFusion. By alternate, I mean not based on cfimage. Since they are based on the Apache Batik Java library, you can do everything I’m going to show you on any Java-based version of ColdFusion. (I’d wager that you could probably do everything on versions of CF going even further back.)

First, the obigatory eye-candy to convince you that I’m not a crackpot:

  1. My original post in Fall 2006 about image manipulation without CF8

    nowrists.com global traffic

  2. Another post, 2 days later, with more graphics

  3. And, of course, the graphs I make for my runs are all done via SVG:

    Run for Saturday, 2008-01-26

Why would you want to generate images with SVG instead of the more traditional way — with cfimage or a similar raster-canvas-based approach?

  1. Existing vector tools, such as Inkscape and Adobe Illustrator, can help you get a base template graphic up and going significantly faster than generating one through code. The exported SVG file can then be tweaked by hand as needed.

  2. Similarly, you can have a graphic artist, someone who is paid to come up with pretty and swooshy things, do almost all of the work. In the best case, a programmer might have only a few minutes worth of work to do.

  3. Dynamically-sized, stretchy, and “smart” images can be done with an absolute minimum of work and manual coding of complex layout logic. Almost all of the heavy lifting, like transformation math, is done for you.

  4. Translating from a Flash file, or to a Flash file, is going to be significantly easier than with the traditional approach.

  5. SVG images can do everything raster-canvas images can do, and much, much more.

But, of course, I’m going to try to be fair. There are a few down-sides to using SVG with ColdFusion:

  1. Complex graphics can be server-intensive to render. I’d bet that an equivalent raster image would only render slightly faster in most cases, but an unoptimized SVG can certainly chew up the processor. I’ve personally run a graphics service on nowrists.com that has handled dozens of image requests per second on a 1GHz machine, so it’s not as hopeless as some might think.

  2. Memory requirements are almost certainly going to be larger than raster equivalents.

  3. If you want to really break out of the box and start doing advanced stuff, you need to be very comfortable with geometry. I think doing such things by hand with a raster canvas would be even harder to do than with SVG, but it’s still not for the faint of heart.

Having said all of that, what will you need to do this wonderful, magical stuff that I’m talking about here?

Exactly one thing: a Java version of ColdFusion. The default install will work for most things—you won’t run into problems until you need Unicode characters in your graphics. Even then, the fix is a 5-minute one. I’ll have a post on how to upgrade the default version of Batik later on in the series.

I would also recommend, but it is certainly not required, that you get familiar with a vector graphics editing program, such as Inkscape or Illustrator. The next post will introduce SVG and won’t use an editor at all, but eventually you’re going to want the rapid-development that an editor provides. I’m going to use Inkscape in all of my examples and screenshots throughout this series, but if you’ve got the the money and time for Illustrator, I don’t imagine you’ll have too hard of a time translating.

That’s it for now. I estimate there will be a total of 6 to 10 posts in this series, and that it’ll take me about 2 weeks to get through.

Published by

Rick Osborne

I am a web geek who has been doing this sort of thing entirely too long. I rant, I muse, I whine. That is, I am not at all atypical for my breed.