SVG Debian CD Cover

A while back I made a CD cover for debian 2.2rc1. It was one of my first artsy sort of things and I was happy with it. I even shared it with the debian people and got put in the FAQ. Unfortunately I was too busy to keep updating the text as releases came out and eventually it was booted.

I made a replacement in SVG which adds the labels using ecmascript and the DOM. If your browser can view them, you can generate one using this form. (The form also allows you to view the URL needed for viewers like Batik which can take a URL, but can't do a HTML form.) If necessary, you can also download the files and use Batik locally. (Questions marks are allowed in file names on some OS's though and so file:/ urls do not necessarily work with arguments.) The how of how it was done follows.


I was wandering back through old stuff and noticed those covers and thought, "hmm…, it is just some image compositing with some blending… I bet I could to that in svg and let people make the text whatever they want." So, this page is me figuring out how to do that…

I need this image to fade at the border and to do that I will need to mask with a radial gradient. Such a svg would look something like this:

Your browser doesn't seem to handle the <object> tag

View in Batik.

I used Al Mackey's Linux fox (which I can no longer find a working link for). I thought it would work better in a vector format so I took a bit and vectorized it using Illustrator.

Your browser doesn't seem to handle the <object> tag

View in Batik.

The swirl is just a converted version of the open use logos.

Your browser doesn't seem to handle the <object> tag

View in Batik.

Likewise the lettering is just broken out from an open use logo.

Your browser doesn't seem to handle the <object> tag

View in Batik.

The process now is just compositing and adding some labels. SVG makes importing and manipulating images pretty easy. There is a basic template which uses ecmascript to insert labels.

Your browser doesn't seem to handle the <object> tag

View in Batik.

The parameters can be specified using a form or can be inserted in the URL manually. All of the work is done by a script in the image and there is no server generated content.

The parameters used by the program are:

Here is an example of the image with the query string ?discname=test%20disc%20name&release=woody%201.2%20rc2&discid=1

Your browser doesn't seem to handle the <object> tag

View in Batik.

The filters are in an external file and the Adobe viewer doesn't deal well with that. Your best bet is Batik which supports the external filters correctly.