HTMLで外部SVGを読み込む方法を完全解説！初心者でもわかる画像とアイコンの基本
生徒
「ホームページにSVGのアイコンを置きたいんですが、どうやって読み込むんですか？」
先生
「SVGは画像ファイルなので、HTMLから外部ファイルとして読み込む方法がいくつかありますよ。」
生徒
「普通の画像と同じように使っていいんですか？」
先生
「使い方によってできることや注意点が変わります。順番に確認していきましょう。」
1. SVGとは何かをやさしく理解しよう
SVGとは、イラストやアイコンを表す画像形式の一つです。写真のような画像ではなく、線や図形を数値で表しているのが特徴です。そのため、画面を拡大しても画像がぼやけにくく、スマートフォンやパソコンなど画面サイズが違ってもきれいに表示されます。HTMLやCSSと相性が良く、Web制作やホームページ作成でよく使われています。
2. imgタグで外部SVGを読み込む方法
もっとも簡単な方法が、HTMLのimgタグを使うやり方です。これは写真を表示するときと同じ感覚で使えます。初心者の方は、まずこの方法から覚えると安心です。SVGファイルを画像として読み込むため、難しい設定は不要です。
<img src="img/sample150-100.svg" alt="SVGアイコン">
この方法は手軽ですが、色を変えたり動きを付けたりする細かい操作はできません。
3. objectタグを使ったSVGの読み込み
objectタグを使うと、SVGを一つのデータとして読み込めます。imgタグより少し難しく感じますが、SVGの中身を保持したまま表示できるのが特徴です。ただし、ブラウザによっては表示されない場合があるため注意が必要です。
<object data="img/sample150-100.svg" type="image/svg+xml"></object>
4. iframeで外部SVGを表示する方法
iframeは、別のHTMLやファイルをページの中に表示する仕組みです。SVGも外部ファイルとして読み込めます。独立した表示になるため、レイアウトの影響を受けにくい反面、デザイン調整は難しくなります。
<iframe src="img/sample150-100.svg" width="150" height="100"></iframe>
5. CSS背景画像としてSVGを使う方法
SVGはHTMLだけでなく、CSSの背景画像としても利用できます。ボタンや見出しの装飾など、デザイン目的でよく使われます。この方法ではHTMLがすっきりし、見た目の管理をCSSにまとめられます。
<div class="icon-box"></div>
.icon-box {
width: 150px;
height: 100px;
background-image: url("img/sample150-100.svg");
}
6. 外部SVGを使うときの注意点
外部SVGは便利ですが、注意点もあります。ファイルの場所が間違っていると表示されません。また、別のサーバーに置いたSVGを読み込む場合、セキュリティ制限で表示できないことがあります。これをクロスオリジン制限と呼びます。初心者の方は、まず同じフォルダ内で管理するのがおすすめです。
7. HTMLアイコンとSVGを使い分ける考え方
HTMLアイコンフォントは文字のように扱える手軽さがあります。一方で、SVGは細かいデザインや高画質表示が得意です。簡単な装飾ならアイコン、デザイン性を重視するならSVGと考えると理解しやすくなります。用途に合わせて選ぶことで、ホームページの見た目と使いやすさが大きく向上します。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
