HTMLでホームページにSVG画像を表示させるオススメの方法
| Date: | 2023.12.12 |
|---|---|
| Update: | 2024.01.05 |
執筆･監修
Xにポストする
Facebookで共有
コピーするHTMLでSVG画像をホームページに表示させるためには
- jpg画像と同じようにファイルを読み込む
- <svg>タグを使用してHTMLに直書きする
といった方法があります
それぞれにメリット・デメリットがありますがそれぞれのいいとこ取りをしたicoMoonというオンラインツールを使い、フォント化して表示させる方法もあります
目次（読みたい所をクリック!!）
SVGをWebサイトに表示させる一般的な方法
jpgと同じように扱う
jpgと同じように<img>タグを使用した場合、SVGを構成しているpathの色や太さなどを変更することができません
<img src="icon.svg"><svg>タグでHTMLに直接記述する
<svg>タグを使用する場合では、pathの色や太さを柔軟に変更することができますが、HTMLファイルが煩雑になってしまうといったデメリットがあります
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
<path d="M224 256a128 128 0 100-256 128 128 0 100 256zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3h-91.4z" fill="#676767" />
</svg>SVGをフォントファイルにまとめることができるicoMoon
そんな時に便利なのがicoMoonというオンラインツールです。
icoMoonでは複数のSVG画像をまとめてフォントファイル化してくれるので自分で用意したSVG画像をfontawesomeのように使用することができるようになります
<i class="icon-square"></i>また、元々icoMoonで用意されているアイコンを使用することもできます
フォントとして使うことができるので
- 色はcolor
- 大きさはfont-size
を指定することで変更することができます
なおかつHTMLコードもすっきりさせることができます。
fontawesomeと異なりホームページで使うアイコンだけをフォント化できるのでリソースの削減にも効果的です。
ただし、デメリットもあります
- 自分で用意したSVGをアップロードする際は、pathのstrokeやfillがうまく反映されない場合があります
- SVGを追加したいときにフォントファイルを更新するのが多少めんどくさいです
icoMoonを使用する際は例えば、メディアサイトなどの大規模サイトでアイコンを複数使い回す必要があり、なおかつ独自のアイコンを使いたいときなどは導入しておくメリットはありそうです
SVGを使うための方法比較
今回紹介した方法以外にもsymbolタグを使うといった方法もあるようです
それぞれの方法について詳しく比較している方がいましたのでこちらも参考にしてみてください
https://zenn.dev/vava/articles/baaf366f767d55
←Twitterもコツコツと更新してるのでよければフォローを、、、
この記事へのコメント 0件