demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Using SVG as an Alternative To Imagemaps

svg / imagemaps

Estimated reading time: 2 minutes, 26 seconds

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 . 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 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 supplemented with the xlink prefix that SVG requires, and the xlink namespace added to the root SVG element.

<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 the area of each vector shape, shown 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 :

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, as I’ll show you in future articles: right now I would suggest this approach as an excellent replacement for many imagemap applications, with the usual limitation of IE: only IE9 and above support directly embedding SVG in web pages; all other browsers are fine.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.