Interactive SVG map

I've been learning how to animate SVGs (I've written a couple of tutorials of what I have since learnt here and here) and have updated my map-drawing program to create interactive maps.

Below is a map I made to show life expectancy (at birth, as of 2007) in Africa. You can mouse-over the map to see the name of a country and the life expectancy there. I'm impressed with how powerful SVGs can be, but slightly disappointed that transparency doesn't work in Chrome [update: it seems to work now - Horray!]. The map can look a bit grainy, but looks a lot smoother if you zoom in a bit.

Life expectancy (2007)

Note, Internet Explorer before IE9 can't render SVG and Firefox doesn't support mouse-over animation. It definitely works with Chrome and apparently works in Safari (thanks Al).

The mouse-over effect works by adding a set element to each country's path with changes the opacity of the path as the mouse moves over it:

<path d="lots of coordinates...">
  <set attributeName="opacity" from="1" to="0.5" begin="mouseover" end="mouseout"/>

The only country for which this appears not to work is Lesotho, the enclave in South Africa. The reason that it doesn't appear to lighten is that when you can see through it, you see South Africa below, which is the same colour. I will see if I can sort this out by cutting a Lesotho-shaped hole in South Africa.

To get the names of countries to appear, I created the a text element for each country with its name at the same position and with visibility="hidden". Then for each text element I added a set element with the begin and end events pointing to that country. This works because the path of each country or the group of paths of a country has a class equal to its name.

For example, the Algeria text element contains:

<set attributeName="visibility" from="hidden" to="visible" begin="Algeria.mouseover" end="Algeria.mouseout" />

[A more efficient way to achieve this effect is to use ECMAScript]

T. brucei rhodesiense (1990-2006)

The main reason for experimenting with this interactivity is to see whether I can display several years worth of data on the same map. Below is a map that can display data (new cases of T. brucei rhodesiense) from nine different years when you mouse-over the relevant year. This allows one to track the spread and decline of the disease.

I would like to prevent the colours from disappearing when the mouse leaves a year, but couldn't make the mouse-over work properly when I removed the end condition. I'd also like to stop the mouse icon from changing when it moves over the text. Finally, like to display the number of cases of T.b.rhodesiense for a country when it is selected, but I think this would be very complex to implement.


Looks like it works in Safari too on the mac.

Have you looked into solutions such as SVG Web and Ample SDK to make this cross browser?

I am myself looking into this but I'm struggling to make basic Javascript interactions to work on IE. These solutions are supposed to enable scripting so I don't know what I'm doing wrong.

There is a good article on A list apart about SVG :

@Flowermountain, thanks for pointing me towards SVG Web, Ample SDK and the A list apart article. I'll have to give them a good look when I get some time. I'm afraid I've not got around to trying the Javascript approach so I can't be any help.

Note, (...) Firefox doesn't support mouse-over animation.

Animation works, at least with Firefox 6: thinks are going better!

Thanks for pointing that out, Giles; I'll update this article and another soon. I've just noticed that it half-works (so probably could be made to work) in Firefox 5 too.

Hi, Peter.  I've been studying all your SVG tips and implemented some on my main web site thanks to you.  Now, I am having difficulty centering images in the web page.  The Polygon (x,y) point coordinates appear to be referenced from the left side of the page.  Any idea how I can get a map similar to your Africa example , centered on my web page?

To centre the embedded image on a page put it in a <div> of the same size with auto margins. E.g. for the 400 x 400 px Africa map:

<div style="width: 400px; height: 400px; margin: 0 auto;">
  <embed src='Africa_map.svg' width='400' height='400'/>

Hi Peter

Have you looked into Raphael js or ExtJs draw for cross browser SVG. Both include IE6 and use VML where SVG is not available. I'd be interested in your thoughts.

Hi Steve,

I've used Raphael and which has worked well for me for cross-browser SVGs. It seems pretty good for adding interactivity too. If I'm not bothered about cross-browser functionality, then I like to use SVG directly as it gives me more control and is more efficient (the SVGs created by Raphael tend to be quite bloated).

Hi Peter,

I was wondering, is there a way to add a click event for each of those elements/countries? That in order for the user to be directed to another webpage, related to the country clicked.


Hi Drini,

You can add links by wrapping the shapes with an <a xlink:href=""> element. For an example, see:

Nice examples Peter! I've been using google geochart api to built interactive maps. You can't get them to do some of the stuff you do here, but it's still a good alternative. I've created a Wordpress plugin to create maps easely, no need to program anything, just deal with an interface. Check out examples here:

Just try to open your page in internet explorer, it seems the svg map works?

OK, I think IE10 and maybe IE9 can display SVGs.


Ciao, my namese is Alessandro.
I living in Trieste, Italy.
No speak English :( but less understanding!
per il Vostro sito, mi è stato utile in passato ma mi sono arenato sul
codice ecmastript quando tentavo di richiamare una light-box
nell'esecuzione di una mappa svg.
è possibile avere un esempio di mappa con uno script .... una sinstassi giusta per usare gli script ??
molte grazie

I have FF 22.0 and the mouseover animation works without any problem :)


Post new comment

The content of this field is kept private and will not be shown publicly.