Creating images with a text editor

February 25, 2009, 2:03 PM — No, I'm not talking about ASCII art like this little crab. I'm talking about scalable vector graphics or SVG files.

     /\
    ( /   @ @    ()
     \  __| |__  /
      -/   "   \-
     /-|       |-\
    / /-\     /-\ \
     / /-`---'-\ \
      /         \

Even if you're familiar with the basic difference between raster and vector images, it might not be immediately obvious that you can create simple images using nothing more than a text editor.

Here's a very simple example. The instructions below define a small red circle with a black border. These lines comprise an entire SVG file. Put the code in a text file, call it something like "eg1.svg" and drag it into a browser. Voila! You have a circle.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

Roughly half of the code in this example identifies the type of file content as SVG and establishes some style settings. The text following the "circle" tag defines what our circle will look like. The cx and cy settings define the x an y coordinates for the circle's center. The r setting defines the circle's radius. The stroke and stroke-width settings then determine the color and width of the circle. Lastly, the fill determines the color to be used inside the circle. Change this to "orange", "turquoise" or "lavender" and your circle changes color.

If you try the code in the next example and drag the file into a browser, you will see a very large circle, most of which has extended beyond the borders of your browser window. That leads to what I think of as the most beneficial aspect of vector graphics -- you can grow them to practically any size and still have good resolution. Where a raster file will quickly lose its clarity if stretched beyond its normal resolution, you can stretch a vector file to cover a billboard and it will still look good. Changing the radius setting in this example from 900 to 54000, for example, would be doing just that. It won't fit on your screen any more -- in fact, you'll literally just see red! -- but it will be a handsome circle just the same. Get a monitor the size of a billboard and you will see what I mean.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="1000" cy="1000" r="900" stroke="black"
stroke-width="2" fill="red"/>
</svg>

The other advantage is that vector files are generally considerably smaller than their raster counterparts and for obvious reasons. Defining a circle as a sequence of pixels in a large bitmap takes a lot more data than describing a circle as a set of coordinates and a radius.

In this final example, we create a rectangle and then rotate it.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox = "0 0 200 200" version = "1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x = "20" y = "40" width = "150" height = "100" fill = "lavender" stroke = "turquoise" 

stroke-width = "2" transform = "rotate(45 75 75)"/>
</svg>

Here you can see that we've defined our coordinates, rectangle height and width and outline and fill colors. We've then rotated the rectangle clockwise using x=75 and y=75 as the rotational axis.

If you'd like to experiment with a more sophisticated SVG file, take a look at the famous lion cub illustration available at http://www.croczilla.com/svg/samples/lion/lion.svg. The vector instructions in this file are far more complicated than the simple examples in this column, but the file is still much small than its png equivalent (see attachment) and still looks good when you blow it up.

You can open SVG files and work with them using Gimp, Inkscape, Adobe Illustrator and likely other tools as well. Gimp and Inkscape are free. Using Gimp, you will have to save your work in some other format (Gimp opens SVG files, but will not save in this format). Inkscape will both open and save SVG files in the SVG format.

Of course, SVG files are not the only variety of vector files around. There are also EPS (encapsulated postscript) files and AI (Adobe Illustrator) files. They offer the same advantages as SVG. Of course, once any of these file types reaches a degree of complexity, creating or editing them with a text editor is no longer practicable. I've found that being able to create a circle of any size to be extremely useful at times, but I switch from text editor to Gimp whenever I want to do something even moderately fancy.

Lest I leave you with the impression that vector art is simplistic, allow me to suggest that you google "vector art", selecting the images option for a real treat. You'll find yourself looking at a screenful of jpg, gif and maybe even png files, but don't start laughing at me. These images were captured as raster files only for their easy insertion into web pages. The originals were all vector files of one form or another. Some are strikingly beautiful art. Others are nearly impossible to distinguish from photos. Vector files have a special place on the web and can be a lot of fun to work with -- especially if you don't try to create great art with a text editor.