I'll think of a good title later

A while ago I found a link to this flash based game which presents a world map & the object of the game is to click on the country whose name pops up on the bottom.

I thought this game would be an excellent tool for learning the locations of countries, but after playing it for a little while I noticed many limitations.

There are some countries missing, Greenland for example. It has annoying sound effects. You can have as many guesses as you like within the time limit, meaning you can click wildly, chance upon the right answer by accident & possibly without knowing which country was the correct one. The navigation is a bit clunky for many reasons. You have a number of predefined zoom levels, on the lower zoom levels many countries are too small to be clicked. While zoomed in you can pan round the map by clicking & dragging a body of water, but on the higher zoom levels sometimes there is no sea or lake to drag - so you have to zoom out, pan, zoom back in & select your country before the timer runs out which can be frustrating.

Worst of all though (especially in terms of learning) this game does not provide any feedback other than yes or no. To really learn you need to be told what you did wrong & what the correct answer was.

Clearly there is room for improvement. So I thought I'd give it a go.

SVG

A couple of years ago I started looking at Scalable Vector Graphics (SVG). At the time though, there was only one viewer available from Adobe & it wasn't particularly great back then. Online information was limited to a few examples that all linked back to the W3C specification & there were no editing tools available. I learnt to draw the basic shapes (hand coding) & that was about it. What I wanted to do with SVG at the time was way too advanced for the little I was able to learn so I thought I'd leave it for a while to let the SVG scene develop.

Here we are a year later & yes the SVG scene has developped, we have editors, native support in a number of browsers & considerably more reference material available online. There are also a large number of SVG advocacy articles, all saying the same thing.

Yes it's scalable, yes it has a small filesize, yes it is an open format etc. But these are all plus points that relate to graphics formats. For me the best thing about SVG is that it is text, or more specifically XML. This means that the contents of an SVG file is machine readable data. But unfortunately everyone seems to be treating SVG as a graphics format & totally ignoring this major strength.

An SVG file consists of a number of elements, for example a element will draw a rectangle, a <path> will draw a curved line etc. Well coded SVG will have a unique ID assigned to every element, an ID that provides information as to what that element actually is. For example a picture of a man in a suit would have an element describing his head, another his shirt, another his tie, another his jacket & another his trousers. Each element has a unique ID, "Head", "Shirt", "Tie", "Jacket", "Trousers". If you want to change the colour of the shirt, you simply find the element that contains the text id="Shirt" & change the colour. If you want to change the picture to a midshot, you just find the element with id="Trousers" and delete the element. Working with the image becomes very easy because the data MEANS something.

Rule 1 of SVG:

Every element must have a unique & descriptive ID

The Open Clip Art Library already has a huge number of svg files on all manner of subjects. But if you look at the source of all the files they have all been created using Inkscape or Sodipodi, two major SVG editors which enable you to save pictures in the SVG format.

None of the elements have any useful semantic information assigned to them. At best an object will have 'id="path2521"' as an attribute, but this only tells us that it was (possibly) the 2521th path that was drawn. Most elements don't have a unique ID at all.

To create the Find the country svg I first started with this blank world map that I found in the Wikimedia Commons which obviously provided me with a great start. But looking at the data the entire world was drawn as a single path element. Every country on the planet was lumped together as one object. An SVG viewer is perfectly capable of rendering the information in the file into an image that looks like a map of the world. But because there is no information contained in the file stating what that shape is it has no idea as to whether one shape is England, France, Germany or any other country.

My first task using a bit of regexp magic was to seperate that one single element into lots of individual elements. Then I went through each element in turn, finding it on another map then assigning that countries name to the element as a unique ID. While doing this I found another problem with the original file was that some of the paths represented more than one country. The worst offender being a single path that depicted Norway, Russia, North Korea, Kazakstan & many others. Because these countries were not stored as individual elements they could not be treated individually.

Rule 2 of SVG:

One Element = One Object

The last major problem I had with the original file was the order in which the file was composed. The original must have been made by importing a traditional raster image of the world which was then automagically converted to SVG. Not knowing what it was doing (raster file formats don't hold any semantically meaningful data either) the SVG simply drew all the elements in order from left to right, then top to bottom. For a computer this is entirely logical, but us humans tend to group data differently. In the case of countries the obvious way to group them together is by continent. If you look at the source of my file you'll notice all the countries are grouped in a much more human friendly way.

Rule 3 of SVG:

Group elements together by usage

By following these 3 simple rules you produce SVG files that are much easier to maintain. For example, say you wanted to change my svg file to only include African countries. You'd simply need to delete the other 5 continents which are clearly labelled in easy to read plain text.

Jax seems to think that 2007 will be a slow year for SVG. I certainly hope he's wrong.