Maps are vectors, treat them with respect!

Maps are representations of spatial data. They are bunch of symbols that fit together to make sense of the world. Then why oh why do we still use bitmaps and raster images to render these maps, when they are vector shapes and not imagery? Even if you use tiles to render scalable maps, that still involves raster images that need to be loaded every time you zoom in and out of an area, or pan to a different view. The result is that the server that serves these images is being put under undue stress.

SVG renders shapes and visualizations in the browser, and hence completely scalable. The advantage of using SVG is that you don’t have to serve map tiles from a server and then load these tiles on a client screen. You can just render the map on the client screen itself, making the page and map load faster, and reducing the amount of data transfer required. What you get is a vector shape that looks equally sharp on the small screen as it does on a large one. SVG is quick to load and most of the browsers today (except IE 8 and below) and mobile devices already have SVG support. Moreover, there is NO pixelation, no blurred edges and you can style your maps very easily using CSS3, which in itself kills off the need for pre-designed map tiles.

As a developer, you can always incorporate fallback techniques to your SVG maps to load them on a browser without SVG support. What you get is a win-win situation where modern browsers can render the map in a vector format, while those who still use ancient browsers can still see your maps as PNGs.

Great minds have already gone ahead and built libraries to help you easily render your maps in SVG.


JQVMAP is a jQuery based plugin that allows you to render SVG maps, also providing legacy support for older browsers.


The folks over at Stamen Design and SimpleGeo have built Polymaps, a very nice JavaScript library that helps you develop SVG based mapping applications.


Kartograph is a framework to build interactive mapping applications, rendering maps in SVG. Where Kartograph is unique is that  it provides libraries in Python and JavaScript to help you create interactive mapping applications off the bat.

D3 (Data Driven Documents)

D3 is more of a JavaScript library for visualization than rendering maps, but you can render maps using the library, if you are so inclined.

SVG is here to stay, and it does a better job of rendering maps than images do. Treat your maps with respect and start rendering them in SVG.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s