SVGのインタラクティブ要素が色々面倒な感じなので、単純なリンクならSVGをイメージマップにしてやればいいんじゃないかと考えた。HTML側で完結するし、代替リンクも提供でき、普通にイベント割り当ても可能。ただCSSでwidthプロパティーなどを使ってスケーリングさせた場合、イメージマップのareaもスケーリングしてくれないと困るなと調べたら、全然無理だった。
Demo: Image Map and CSS width Property
Normalは96x96のPNG画像をそのまま表示しており、内側の水色の四角がイメージマップのクリックできるエリアになっている。2xは同じ画像を192x192にスケールさせており、もしcoords属性で指定した範囲が追随してくれるならば、Normalと同じように内側の水色がクリックできる範囲になる。Internet Explorer 11とFirefox 26、Chrome 31ではそうはならなかった。
単純にクリッカブルなエリアをスケーリングさせたいだけならCSS Transform使うといける。これはこれで親要素に合わせて……みたいなことがこのままではできないので、レスポンシブな感じにするにはJavaScriptの助けを借りる必要がある。
アイディアとしては良さそうだったけど、実現するにはcorrds属性の値かイメージマップのサイズのどちらかを動的にイジる必要があり、シンプルに実現するのは無理そう。