【SVG】SVG画像にリンクが貼れなくてハマった！時の解決方法

HTMLに直接インライン

HTMLに直接インラインで記述する方法です。
svg開始タグ～svg終了タグをコピペするだけですので簡単ですが、複雑なSVGファイルの場合はHTMLソースがとんでもなく長くなり、メンテナンスがしづらくなります。

imgタグのsrc属性

jpgやpng同様、普通に画像として読み込む方法です。
ただ、画像要素として扱われるらしく、SVGファイル内のpath要素にCSS、JSが効かなくなるようです。

CSSのbackgroundプロパティ

imgタグで読み込む方法同様、画像として扱われるため、SVGファイル内のpath要素にCSS、JSが効かなくなるようです。
imgタグでの実装もCSSのbackgroundプロパティでの実装も画像として扱われますが、そこはちゃんとSVG画像ですので拡大・縮小はキレイに行われます。特別何もしないのであればこれらの実装方法で問題ありません。

object要素のdata属性

別ドキュメントをiframeで表示しているような動作になり、SVGへCSSやJSを適用させるにはその別ドキュメントに対して適用させないといけません。
object要素の中にimg要素で代替画像を配置しておけば、SVG対応ブラウザにはsvg画像を、非対応ブラウザには代替画像を表示させることが可能です。現時点ではこの方法が利用しやすいのかなと思います。

リンクを設定したのにクリックできない

原因はobject要素の仕様にあるようです。1つはaタグなどのインライン要素内で使われるとそれを踏襲して自身もインライン要素として扱われるため高さの概念がなくなり、クリックする領域が確保できない。もう1つはobject要素が親要素であるaタグを覆ってしまい、aタグをクリックすることができないことに由来します。
これ初めて知りました。

実装方法についてWebクリエイターボックスさんでも紹介されていました。
SVGアイコンを実用するために知っておきたい、リンク周りの記述方法 | Webクリエイターボックス

SVGにリンクを貼りたい場合、単純にaタグでsvgを囲んでもうまくリンクを貼ることはできません。svgタグの中のオブジェクトをaタグで囲み、xlink:href属性でURLを指定する必要があります。

上記の方法は直接インラインで記述する実装方法です。
object要素で読み込んで表示している場合は、落ち着いてSVGファイル自体をエディタで開き、同様に次のように編集します。

<svg ...>
<a xlink:href="sample.com">
（元々あったSVGファイルの内容）
</a>
</svg>

こんな感じでaタグで囲めばOKです。

SVG領域内だけが別ページに飛ぶ

しかしここで注意が必要です。
そのままhrefでリンク先だけ書くと飛んだ後にobjectで囲んでいた範囲だけiframeのような動作になり、おかしなことになります。なのでaタグの属性にtarget="_top"を付けることを忘れないようにしましょう。
また、この方法だとSVGのパス上しかクリックできない点も注意が必要です。