ロゴやアイコンの制作を依頼すると、「.svgファイル」で納品されることが増えてきました。 さらに制作会社に発注すると、「インラインSVGにしますか、それとも外部ファイルで読み込みますか」「Base64で埋め込む方法もあります」 といった専門用語が出てきて、何が違うのか分からないまま話が進んでしまうこともあります。
この記事では、SVGという形式そのものの特徴と、それをHTMLに組み込む3つの方法 （外部SVGファイル・インラインSVG・Base64／Data URI）の違いを、体験デモを交えて整理します。
SVGは、色のついた点の集まりで絵を表現するJPEGやPNGとは異なり、「どこからどこへ、どんな線を引くか」という 座標のデータ（ベクター）で図形を表現する画像形式です。
この仕組みのおかげで、スマートフォンの小さいアイコンから、印刷物のような大きなサイズまで、 同じ1つのファイルを拡大・縮小しても輪郭がにじみません。ロゴやアイコン、地図上のマークのような 「くっきりした図形」と非常に相性の良い形式です。一方で、写真のような複雑な色合いのグラデーションを表現するのは苦手です。
SVGを含めた画像形式全体の比較は 画像拡張子・画像形式の選び方 でも解説していますので、あわせて参考にしてください。
同じSVGの絵であっても、HTMLへの組み込み方には3つの選択肢があります。それぞれ見た目は同じでも、 裏側の仕組みと得意なことが異なります。
| 方法 | 書き方のイメージ | 主な用途 |
|---|---|---|
| 外部SVGファイル | <img src="logo.svg"> |
ロゴなど、複数ページで使い回す画像 |
| インラインSVG | <svg>...</svg>とHTMLに直接書く |
アイコン、色やアニメーションをCSS/JSで動的に変えたい図 |
| Base64 / Data URI | <img src="data:image/svg+xml;base64,..."> |
小さい画像、メールHTMLなど外部ファイルを読み込みにくい場面 |
3つの方法の一番の違いは、「HTMLの中の要素として、CSSやJavaScriptから直接操作できるかどうか」です。 以下のデモでは、左側のインラインSVGだけがコントロールに反応します。右側の外部ファイル（画像として固定されたもの）が動かないこととあわせて確認してみてください。
左はインラインSVG、右は外部ファイルで読み込んだ同じ画像です。下のコントロールを動かすと、左だけがリアルタイムに変化します。
※イラストは解説用のサンプルです。実際のファイルは差し替えて運用します。
会社のロゴのように、複数のページで繰り返し使う画像は、外部ファイルとして用意するのが基本です。
一度ブラウザに読み込まれると、以降のページ遷移ではキャッシュが効くため、通信量を抑えられます。
HTMLのコードも <img> タグ1行で済み、見通しがよいままに保てます。
「ボタンにカーソルを合わせたらアイコンの色が変わる」「クリックすると図形がアニメーションする」―― こうした動きや色の変化をCSS・JavaScriptで細かく制御したい場合は、インラインSVGが向いています。 HTMLの中に図形の情報がそのまま存在しているため、通常の文字要素と同じ感覚でスタイルを当てられます。
一方で、同じ図形を何度も使うページでは、そのたびにコードが重複してHTMLが長くなりやすい点には注意が必要です。
Base64は、画像データそのものを文字列に変換して、HTMLやCSSのプロパティ値としてそのまま埋め込む方法です。 画像1つぶんの通信（HTTPリクエスト）が発生しないため、外部の画像ファイルを読み込めない、または読み込ませたくない場面で活躍します。 代表例が、外部画像がブロックされることの多いメール本文のHTMLです。
ただし、文字列に変換する過程で、元の画像より数割ほどデータ量が増えてしまう点と、 ブラウザのキャッシュが効きにくい点はデメリットです。使い回す画像が多い通常のWebページでは、 多用すると逆にページが重くなることもあるため、小さい画像や限定的な場面での利用にとどめるのが無難です。
迷った場合は、まず外部SVGファイルとして用意しておき、「動きをつけたい」「メールに埋め込みたい」といった 具体的な必要が出てきたタイミングで、インラインSVGやBase64への切り替えを検討する、という順番で考えると失敗しにくくなります。
SVG・インラインSVG・Base64は、見た目の結果こそ同じでも、仕組みも得意なことも異なります。