Part of the SVG Imagemaps Reading List

To create a clickable map on a website – for example, to create a world map for an company with several international distribution centers –  imagemaps have been the traditional solution: bitmaps with linked “hotspots” written in HTML. While this works, imagemaps have several significant limitations in modern web design:

  • Imagemaps take significant time to develop, due to the fact that the hotspots must be plotted by hand.
  • While you can scale the bitmaps that makes up the imagemap, the plotted points in HTML do not scale, “drifting” the hotspots out of registration with their associated visual area.
  • Bitmaps tend to drop in quality or have an uncomfortably large file size when they are scaled, making them inappropriate for responsive websites.

As an alternative, I would suggest using , which avoids these limitations entirely:

  • Accurate SVG maps of every nation and the world are already available for free (Wikipedia is a great resource, as is Régis Freyd’s MapsIcon project) with plotted outlines that can easily be turned into hyperlinked hotspots.
  • As vector outlines, SVG files tend to be very small in file size.
  • As vectors, SVG can be infinitely scaled without loss in quality or lack of registration.

As an example, I’ll use a map of lower western Canada, edited in Adobe Illustrator from Wikipedia’s SVG file of a Canadian map, then cleaned up in a text editor. The start of the file looks like this: 

<svg version="1.1" xmlns="//www.w3.org/2000/svg" viewBox="0 0 525 365">
	<path id="ab" fill="#D3D3D3" d="M351.371, 342.397c-55.342, 1.268-49.207, 1.742-54…" />
</svg>

Each path outlines the shape of a Canadian province.  They can be linked using standard <a> tags, with the href attribute and root svg element supplemented with the xlink namespace that SVG requires. 

<svg version="1.1" xmlns="//www.w3.org/2000/svg" viewBox="0 0 525 365" xmlns:xlink="//www.w3.org/1999/xlink">
	<a xlink:href="//travelalberta.com/">
		<path id="ab" fill="#D3D3D3" d="M351.371,342.397c-55 …" />
	</a>
…
</svg>

If you try the SVG file in your browser, you’ll see that the link only becomes active when you hover over each vector shape, indicated by a cursor change. We want to provide a greater visual impact, and make the code more efficient at the same time. Removing the fill from each path, we recreate the appearance using an embedded style. As I’ve shown previously, you can address most any SVG element in a CSS declaration, just as you can HTML: 

path {
	transition: .6s fill;
	fill: #D3D3D3;
}
path:hover {
	fill: #22aa22;
}

(Vendor prefixes removed in order to save space).

Finally, make the SVG fully responsive using this technique and embed the resulting code directly in the HTML page to take full advantage of the interaction you have built.

There’s a lot more that we can do with this technique, as shown in this reading list. I would suggest this approach as an excellent replacement for many imagemap applications.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/doexPL