08. アイコンは画像じゃなく
SVGを使うのが正解だった

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

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

この形式の最大の弱点は、拡大に弱いことです。高解像度なディスプレイ（Retinaディスプレイなど）で表示したり、ユーザーがブラウザのズーム機能を使ったりすると、足りない画素を無理やり引き伸ばすため、輪郭がボケてしまいます。「猫の手ツール」のような、実用性が求められるツールにおいて、この「ボケ」は信頼性を損なう大きな要因でした。

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

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

最も面白いのは、SVGが単なる「画像ファイル」ではなく、XMLベースの 「コード（テキスト）」 であるという点です。HTMLファイルの中に直接貼り付けることができ、ブラウザが描画する瞬間に計算を行って線を描くため、理論上、どんなに拡大しても劣化することがありません。

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

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

【実際のコード】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. インフラエンジニアが痺れた3つのメリット

当初は「画質が綺麗」という理由だけで使い始めましたが、詳しく調べていくうちに、インフラ管理やパフォーマンスの観点からも非常に優れた特性があることが分かりました。

• HTTPリクエストの削減： HTMLに直接コードを埋め込む（インライン化）ことで、画像ファイルをサーバーから取得するための通信（リクエスト）を減らせます。これはページ読み込みの高速化に直結します。
• CSSによる動的なスタイリング： fill="currentColor" と設定しておけば、Tailwind CSS の text-indigo-600 といったテキスト用のクラスでアイコンの色を自由自在に変えられます。ホバー時に色を変えるために別の画像を用意する必要はありません。
• 圧倒的な軽量化： 数KBあるPNG画像に対して、SVGコードはわずか数百バイト。テキストデータなので圧縮効率も極めて高く、転送量を最小限に抑えられます。

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

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

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

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

セキュリティへの配慮

SVGはXMLファイルであり、実は内部にスクリプト（JavaScript）を埋め込むことができてしまいます。信頼できないサイトから拾ってきたSVGをそのまま使うと、XSS（クロスサイトスクリプティング）の脆弱性になる可能性があるため、必ず中身を確認するか、信頼できるアイコンライブラリを使用すべきです。

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

「猫の手ツール」では、現在すべてのアイコンをSVGに統一しています。

どのデバイスで見ても一切ボケることのないクッキリとしたUI。そして、CSSのクラス一つでテーマカラーに追従する柔軟性。「リクエスト数を削り、画質を最高にする」という、インフラエンジニア的な合理性を追求した結果、SVGはなくてはならない存在となりました。

小さなアイコン一つにも、技術的な「正解」がある。それを積み重ねることが、ツールの完成度を高めるのだと改めて実感しています。