Revisiting Image Maps

> This approach is problematic. Those anchors are only active when SVG is inline and don’t work with an <img> element.

No, this approach is fine: you just need to use <object data=…> instead of <img src=…>. <object> is the correct choice for embedding interactive SVG.

But you probably do want the SVG to be inline anyway, because it will load faster and is in this case actively the content of the page; which is the technical decision he ended up at, though perhaps for partly the wrong reason.

(There’s also <iframe>.)

if you wish to be visually kind to safari users you can eliminate the default gray selection indication flash animation safari does upon a tap activation with just a tiny bit of webkit-only css , for example ...

#links { -webkit-tap-highlight-color : transparent ; }

added to the css of their codepen fixes it (without causing any issues for other/std browsers afaik)

If you're trying something like this and irregular-shaped clickable areas are not a concern (like if only the numbered circles from the article's example would be clickable) then absolutely positioned anchors can be made to work. The trick is to use js to apply a css scale transformation to a relatively positioned parent container whenever the underlying image changes size.

Server-side image maps were specified in HTML 2.0, in section 7.6 of RFC1866.