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

画像ファイルとしての限界

最初、カメラのアイコンや保存アイコンを表示するのに、小さな icon.png を用意しようとしていました。でも、スマホのズーム機能で拡大するとぼやけてしまう。これに困っていたところ、SVG (Scalable Vector Graphics) という存在を知りました。

画像なのに「コード」で描かれている

SVGは、ピクセルの集合ではなく「点と線を繋ぐ数学的な計算式」で描かれた画像です。HTMLに直接 <svg> というコードを貼り付けるだけで表示されます。これの何が凄いかというと…。

• いくら拡大してもぼやけない： どんなに高解像度なスマホでもクッキリ。
• CSSで色を変えられる： text-indigo-600 と書くだけで色変更が可能。
• 軽量： ただのテキストデータなので、読み込みが爆速。

インフラ屋としては「リクエスト数を減らせて、画質も最高」という特性に痺れました。今回のツール内のアイコンはすべて、この「数行のコード」で描かれています。