Creating an SVG Image Map with Figma and a Touch of Javascript

Uncovering the meanings behind The Prettiest Curse

Spanish indie rock band Hinds have announced their latest record The Prettiest Curse will be dropping April 3rd. The album cover of this new effort shows the four bandmates lounging about, surrounded by seemingly random objects: a heart shaped mirror, a deck of cards, a passport, etc. Well, as it turns out, some of these items are thematically connected to one of the songs on the album. Hinds had the idea to allow fans to discover these hidden meanings by interacting with each object. The idea reminded me of those hidden pictures maps you might find in a children’s Highlights magazine.

The web is no stranger to image maps. In fact, there is actually a <map> tag which allows you to define clickable areas on an image which was introduced in 1997. 🤯 Check out Zack Bloom’s great (quick) history on image maps on the web.

I knew I wanted to trace the exact contours of the object rather than define a rectangle or circle boundary. And while the <map> tag does have polygon regions, I also needed the solution to be responsive out of the box and easily styled in case we needed to style clickable areas. I immediately gravitated towards SVGs as a solution. I just needed to pick the appropriate software to do the tracings and exports. How about Figma?

A pen tool tracing in Figma

The Figma pen tool is simply a pleasure to work with. Not quite as sophisticated as the Illustrator pen but certainly not as unpleasant as the Photoshop pen. More importantly, the Figma SVG exports are simple and clean. After an hour of tracing, I’m left with SVG markup that defines the shape of each of the 10 hidden objects. This markup consists of an <svg> parent and 10 <path> children.

<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1722 656C1714.33 647.667 1692.7 636 1667.5 656C1642.3 676 1655.33 705 1665 717L1712 780C1718.5 788.5 1733.5 798 1752.5 780L1815.5 717C1826.67 705.667 1841.5 677.6 1811.5 656C1804.67 651 1780 644.5 1765.5 656C1751 667.5 1739.5 677 1722 656Z"/>
  ...
</svg>

I can drop this SVG right in the code to see my object tracings but what about the original image? For this, I simply create a parent div and apply the original image as a background. Here’s a bit of CSS which will also give you a perfectly square div with a responsive SVG within. 👌🏻

<div id="artwork">
  <svg>
    ...
  </svg>
</div>
<style>
#artwork{
  background: url(artwork.jpg);
  background-size: cover;
}
#artwork:after{
  content: '';
  display: block;
  padding-bottom: 100%;
}
#artwork svg{
  height: 100%;
  width: 100%;
}
</style>

Now that you have the SVG sitting on top of the original artwork, you may want to style the paths. Luckily, you can do that right in CSS as well. For example, turning the paths white:

#artwork svg path{
  cursor: pointer;
  fill: rgba(255, 255, 255, 1);
}

The final task is to do something when the objects are clicked. For this, we can simply setup some event listeners in Javascript on each of the <path> elements.

let paths = Array.from(document.getElementsByTagName('path'))
paths.forEach(path => {
  path.addEventListener('click', (e) => {
    // do something with e.target
  })
})

In our app, we integrated a Contentful powered info modal for each which included the song title, meaning, and audio preview. Be sure to check out Hinds and discover some of the hidden meaning behind their record here.