SVG画像のHTMLでの使い方

2021.03.01

こんにちは。koyaです。

今回は牛の肉の部位毎にマウスホバーの判定が欲しかったため、svgを使用しました。
もしpng画像を使用すると、透過された部分にも画像の判定が入ってしまいます。

その点svgを使用すると動画のように見た通りの範囲のみ判定があるため、今回のようなケースではsvgを使用します。

今回はAdobeXDを使用したsvg画像の出力を行います。

書き出す際の設定は下の画像のように

と設定します。

ファイルサイズの最適化については、ファイルサイズを縮小したものは改行が消えたり、pathのidが消えてしまうのでもしコードを参照する場合はチェックを外した方が使いやすくなります。

こちらではわかりやすい例としてタンのみのsvgを作成しました

上記がsvg画像の主な要素となっています。

defs要素は引用するものがある際に記述されるプロパティです。styleなどが記述されているはずです。

style要素はpath要素などに対するcssとなっているので、htmlに埋め込む場合はcssファイルに移動しましょう。要素が少ない場合は問題なく使える場合もあるかもしれませんが、別の要素に対してもスタイルが適用されてしまう場合があるので注意が必要です。

また、svgに対するスタイルは通常のcssとは違い、fillなどのプロパティを使用します。

詳細についてはこちらのW3Cのsvgの仕様を参考にしていただければと思います。

g要素はXDなどでグループ設定をした場合にグループ分けされている要素です。

サイトでは実際このようなコードを使っていました。

パーツごとの配置などもsvgが補完してくれるので便利です。
パーツごとにリンクが必要な場合は、上記のようにg要素をaタグで囲むことで簡単にリンクを設定できます。

まとめ

いかがでしたでしょうか。
一見すると見たことがない要素や数字が多くて複雑なsvg要素ですが、分解するとそこまで複雑な要素は多く無く便利です。

ぜひ一度利用してみてください！