Create A Responsive Imagemap With SVG

While traditional imagemaps remain a very effective UI pattern for certain sites – especially those that need a visitor to enter a geographical location, or used in navigation that has a particularly strong visual theme – they bring with them two significant disadvantages that make them ill-suited for modern web development:

• Traditional imagemaps cannot be made responsive; while the image can be rescaled, the imagemap coordinates will not, meaning that hotspots will drift out of registration with the underlying image as the picture is resized.

I’ve shown how to recreate simple imagemaps with SVG shapes, but that version did not incorporate bitmaps. As we’ll see, it’s entirely possible to integrate the two formats together.

Vectors & Bitmaps, Together At Last

SVG is generally understood as its acronym: Scalable Vector Graphics. It’s not generally appreciated that an SVG file can also incorporate bitmap images. Placing a JPEG in a new Adobe Illustrator document, cropping the artboard to the size of the image, and exporting the result as an SVG file will produce the following code, after a little cleanup:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >

<image width="1200" height="808" xlink:href="burj-khalifa.jpg">

</image>

</svg>

Note that the <image> element in SVG is very similar to the standard HTML tag, and that the cleaned-up result is already responsive. Once we have that, we can return to Illustrator to overlay a feature of interest in the bitmap image with a vector shape, shown here partially opaque for the purpose of illustration:

The code with a rectangular shape added:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >

<image width="1200" height="808" xlink:href="burj-khalifa.jpg">

</image>

<rect x="535" y="28" fill="#fff" opacity="0.5" width="150" height="750" />

</svg>

You can probably see where this is going. It’s easy to link vector shapes to URLs, using SVG’s variation of the <a> tag. To make a linked vector shape invisible, you can either fill it with a transparent color (using rgba) or set its opacity to 0:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >

<image width="1200" height="808" xlink:href="burj-khalifa.jpg">

</image>

<a xlink:href="//burjkhalifa.ae/en">

<rect x="535" y="28" fill="#fff" opacity="0" width="150" height="750" />

</a>

</svg>

It’s important to keep your hotspots fairly large relative to the image, so that they remain at least 50px × 50px in size when the imagemap is reduced to mobile screen sizes. That way, the interface can still be interacted with via touch.

To get the responsive imagemap on your page, simply add the SVG result into your HTML. To remove the generated space above and below the imagemap, use the responsive SVG technique I’ve demonstrated previously:

<figure id=burj>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" preserveAspectRatio="xMinYMin meet" >

<image width="1200" height="808" xlink:href="burj-khalifa.jpg">

</image>

<a xlink:href="//burjkhalifa.ae/en/">

<rect x="535" y="28" fill="#fff" opacity="0" width="150" height="750" />

</a>

</svg>

</figure>

The CSS:

#burj { position: relative;

width: 100%; padding-bottom: 77%;

vertical-align: middle; margin: 0; overflow: hidden; }

#burj svg { display: inline-block;

position: absolute; top: 0; left: 0; }

In an upcoming print magazine article, I’ll show how you use the power of SVG to make modern responsive imagemaps even more impressive.

Photograph by Bjoem Lauen