Creating images with a text editor

By  

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.

AttachmentSize
lion.png66.86 KB
Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Answers - Powered by ITworld

ITworld Answers helps you solve problems and share expertise. Ask a question or take a crack at answering the new questions below.

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Ask a Question
randomness