Step 1: Web Basics

08. SVGアイコンとPNG画像：用途に合わせた選び方

写真のピクセルと、SVGで描く線や図形は、表示サイズへの対応方法が違います。このサイトのメニューにある猫アイコンはSVG、愛猫の写真や加工結果はラスター画像です。実際のアイコンを読み、viewBoxと表示サイズ、色の継承を分けて確認します。

1. ビットマップ画像が抱える「解像度」の限界

私たちが普段使っている PNG や JPEG といった画像形式は「ビットマップ（ラスター）」形式と呼ばれます。これは、小さな色のついた点（ピクセル）が格子状に並んで一枚の絵を構成しているものです。

PNGやJPEGは画素数が決まっています。表示寸法に対して必要な画素が足りない場合、拡大や高密度画面で輪郭がぼやけることがあります。ラスター画像でも十分な画素数を用意すれば適した表示ができます。

2. SVG (Scalable Vector Graphics) とは何か？

そこで登場するのが SVG です。SVGはビットマップ形式とは根本的に異なり、「点と線をどこに引くか」という情報を数学的な計算式（ベクター形式）で記述します。

最も面白いのは、SVGが単なる「画像ファイル」ではなく、XMLベースの 「コード（テキスト）」 であるという点です。HTMLファイルの中に直接貼り付けることができ、ブラウザが描画する瞬間に計算を行って線を描くため、パスで描いた形状は拡大先のサイズに合わせて描画できます。ただしSVG内に埋め込んだラスター画像や、細かすぎる線まで無条件に鮮明になるわけではありません。SVGも画像形式の一つです。

コードで見る「画像」の実体

例えば、ツール内で使っている「戻る」アイコンのコードは以下のようになっています。

【実際のコード】SVGによるアイコン描画

<!-- 画像なのにテキスト。これがSVGの正体 -->
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  <path stroke-linecap="round" 
        stroke-linejoin="round" 
        stroke-width="2" 
        d="M10 19l-7-7m0 0l7-7m-7 7h18">
  </path>
</svg>

3. アイコンの配信・色・サイズを考える

SVGを選ぶ時は、輪郭だけでなく、配信の仕方・色の変更・再利用する回数も比較します。次の性質は一般的な選択の手掛かりで、このサイトで速度差を実測した結果ではありません。

HTTPリクエストの削減： HTMLに直接コードを埋め込む（インライン化）ことで、画像ファイルをサーバーから取得するための通信（リクエスト）を減らせます。一方、同じ大きなSVGを何度も埋め込むとHTMLが増えます。別ファイルのキャッシュを利用する方が適する場合もあります。
CSSによる動的なスタイリング： インラインSVGの塗りに fill="currentColor" と指定すると、Tailwind CSS の text-indigo-600 などで設定した文字色を利用できます。img要素で読み込んだ外部SVGの内部へ、親ページの色指定が同じように伝わるわけではありません。ホバー時に色を変えるために別の画像を用意する必要はありません。
単純な図形を小さく表現： 線や単色のアイコンではSVGが小さくなる場合があります。複雑なパスではPNG等より大きくなることもあるため、実際のファイルサイズと描画負荷を比較します。

4. 注意点：初心者がハマりやすいポイント

非常に便利なSVGですが、いくつか気をつけるべき「罠」もあります。

複雑すぎるデザインは不向き

SVGは計算式で描くため、パス（線の情報）が多すぎる複雑なイラストや写真のような表現には向きません。コード量が膨大になり、逆に読み込みが遅くなる可能性があります。アイコンやロゴのようなシンプルな形状こそが、SVGの主戦場です。

セキュリティへの配慮

SVGはXMLファイルであり、実は内部にスクリプト（JavaScript）を埋め込むことができてしまいます。スクリプトが実行されるかは、インラインで埋め込むか、imgで画像として読むかなどの利用方法にも依存します。利用者が渡したSVGをそのままHTMLへ挿入しない、配布元やライセンスを確認するなど、用途に応じた取り扱いが必要です。

アイコンの意味を文字でも伝える

同じボタン内に「戻る」と書いてあれば、SVG自体は装飾として読み上げ対象から外せます。アイコンだけのボタンには、ボタン側に操作名を付けます。currentColorは線の色ならstroke、塗りならfillへ指定します。

<button type="button" aria-label="閉じる">
  <svg width="24" height="24" viewBox="0 0 24 24"
       aria-hidden="true" focusable="false" fill="none" stroke="currentColor">
    <path d="M6 6l12 12M18 6L6 18" stroke-width="2" />
  </svg>
</button>

外部SVGをimg要素で読む場合は、そのimgのaltで意味を伝えます。装飾ならaltを空にします。輪郭の鮮明さだけでなく、文字が見えない状況でも操作が伝わるかを確認します。

メニューの猫アイコンは、pathとellipseを文字色で描く

このサイトの共通メニューは、猫の肉球をpathとellipseで描きます。viewBox="0 0 24 24"は座標の範囲、幅・高さのクラスは表示寸法、fill="currentColor"は親から継承した文字色を塗りに使う指定です。

<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
  <path d="M12 11c-3.5 0-6 2.5-6 6s2 5 6 5 6-1.5 6-5-2.5-6-6-6z" />
  <ellipse cx="12" cy="7.5" rx="1.8" ry="2.2" />
  <!-- ほかの指もellipseで描く -->
</svg>

本番アイコンの一部を省いた抜粋です。証明写真ツールでもこのメニューを表示します。座標を変えずに表示サイズを変える操作と、親の色を変える操作を別々に試すと役割が分かります。写真の書き出しをSVGへ置き換える処理ではありません。画像の配置は証明写真の制作解説で確認できます。

5. まとめ：実務での役立ち

猫の手ツールのナビゲーションやボタンでは、SVGのアイコンを使っています。写真や加工結果には、内容に適したラスター画像を使います。

単純なアイコンでは、表示寸法と色を変えやすいSVGが便利です。実際のファイルサイズ、再利用方法、必要な読み上げ情報を確認して形式を選びます。

形式を一つに統一するより、アイコン、写真、生成結果それぞれに必要な性質から選びます。

参考資料

MDN：SVG（別タブで開く）