SVG画像のHTMLでの使い方

SVG画像のHTMLでの使い方

こんにちは。koyaです。

今回は「コロナに負けない!シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。

svgを使用した理由

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

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

svg画像の出力

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

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

  • 形式→svg
  • スタイル→内部CSS
  • 画像を保存→リンク

と設定します。

kamase-2021-03-01.png

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

svg画像の構成

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

  • <svg>
  • <defs>
  • <style>
  • <g>
  • <path>

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

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

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

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

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

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

svgを実際に使う

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

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

まとめ

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

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

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ