クリックできるマップが欲しいとなった時、画像に usemap 指定して…というのが古き良きHTMLの話ですが、パソコン画面からスマートフォンまでデバイス幅が多様になると、レスポンシブ対応がかなり面倒くさいことになります。

そこで、もう usemap など使わずに、SVGファイルを使うことでレスポンシブなクリッカブルマップをつくります。

HTML内にSVGを埋め込んでCSSで挙動を与えるだけなので、従来のHTMLクリッカブルマップよりずっと簡単につくれます。次の参考コードではマウスオーバー時のアクションにjQueryを使用していますが、svgの中の<g>を<a>で囲ってリンクを作るなどしてもいいでしょう。