Vector imagemap of North America

HTML imagemaps were one of the first graphical methods used to navigate complex websites, and continue to retain a number of advantages when they are designed well. One significant drawback of the format in the modern era is that traditional imagemaps are not responsive. Thankfully, can be used to replace this limitation, while bringing a host of new opportunities for site design and UI.

This reading list starts from the techniques of replacing standard imagemaps with SVG variants, then moves to more complex examples, with many more to come:

Time: 2 hours

Prerequisites: HTML, CSS, SVG Intro and SVG Shapes. Some familiarity with suggested.

  1. SVG as an Alternative To Imagemaps
  2. Create a Responsive Imagemap
  3. Imagemap with Info Popups
  4. Interactive Geographical Map
  5. Interactive Color Photo Highlight Effect

Vector map by Jen Olsen

Enjoy this piece? I invite you to follow me at to learn more.