Unix as a Second Language

Creating images with a text editor

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.

Sign up for ITworld's Daily newsletter
Follow ITworld on Twitter @IT_world