ビットマップとベクター
画像は2種類に分かれます：
- ビットマップ（JPEG/PNG/WebP）： ピクセルで構成され、一定以上拡大するとモザイクのようにぼやける
- ベクター（SVG）： 数学的パスで記述され、何倍拡大しても鮮明
この本質的な違いを理解すれば、SVGがどこに適しているか分かります。
SVGの主要なメリット
無限拡大でも劣化しない
SVGはピクセルではなく、パス、曲線、図形でグラフィックを記述します。どんなサイズに拡大しても鮮明でモザイクが出ません。これはSVG最大のメリットで、複数サイズで使うアイコンやロゴに特に適しています。
サイズが小さい（シンプルな図形の場合）
シンプルなアイコンやロゴでは、SVGファイルは同等のPNGよりずっと小さくなります。シンプルなロゴのPNGが数KB〜数十KBでも、SVGは1〜2KBしかありません。ただし複雑な写真のような画像にはSVGは不向きです。
コードで編集可能
SVGは本質的にXMLテキストで、テキストエディタで直接カラー、図形、テキストを変更できます。フロントエンドはCSSでカラーを制御し、JSで動的に変更できます — これはビットマップにはできないことです。
アニメーション対応
SVGは組み込みアニメーションとCSS/JSアニメーションに対応しています。ローディングアニメーションやアイコンのマイクロインタラクションをSVGで実装すれば軽量で滑らかです。
検索・インデックス可能
SVG内のテキストはリアルなテキストで、検索エンジンにインデックスされ、スクリーンリーダーで読めます。画像に焼き込まれたテキストよりフレンドリーです。
SVGに適したもの
- アイコン： ナビゲーションアイコン、機能アイコン。UIデザインの第一選択
- ロゴ： ブランドロゴは複数サイズで使う必要があり、ベクターが最適
- イラスト： フラットなイラスト、装飾グラフィック
- チャート： データ可視化チャートはベクターで拡大しても鮮明
- アイコンフォント： アイコンフォントは本質的にSVG
SVGに不適なもの
- 写真： 写真は色彩が豊かでディテールが多く、ベクターで記述するとサイズが膨張し歪む。写真にはJPEG/WebPを使いましょう
- 複雑なグラデーションやテクスチャ： 過度に複雑なグラデーションやテクスチャはSVGのサイズが大きくなり、ビットマップに劣ります
- フィルター効果が必要なもの： 複雑なフィルター効果はビットマップの方が効率的
SVGの限界
互換性の端の問題
モダンブラウザはSVGを全面的にサポートしますが、一部の古い環境やメールクライアントはSVGのサポートが不十分です。重要な状況ではテストしましょう。
複雑な画像はかえって大きくなる
写真のような画像をSVGに変換すると極めて巨大になり歪みます。SVGは万能ではなく、ベクターグラフィックにのみ適しています。
学習コスト
SVGの設計にはベクター描画スキルが必要で、ビットマップのように撮影で得ることはできません。ただし既成のSVGリソースやビットマップ→SVG変換ツールを使えばハードルを下げられます。
ビットマップからSVGへ
ビットマップ（PNGなど）からSVGへの変換は「トレース」プロセスです — ツールが画像内の図形の境界を識別し、近似的なベクターパスを生成します。
画像→SVGツールを使います：
- ビットマップをアップロード（シンプルで高コントラストの画像、ロゴなどが推奨）
- ツールがトレースしてSVGを生成
- SVGをダウンロード
変換の注意
- シンプルな図形（ロゴ、アイコン）のSVG変換は効果が良い
- 写真や複雑な画像のSVG変換は歪みが生じてサイズが大きくなり、推奨されません
- 変換後にエッジが滑らかか、カラーが正確かを確認
- 変換後のSVGはテキストエディタでさらに最適化可能
SVGの使い方のアドバイス
HTMLにインライン
小さなSVGはHTMLに直接インライン化し、HTTPリクエストを省き、CSSで制御できます。
アイコンにcurrentColorを使う
アイコンSVGをcurrentColorで塗りつぶせば、CSSでcolorを変えるだけでアイコンの色が変わり、1セットのアイコンを複数色で再利用できます。
SVGを圧縮
SVGはテキストで、ツールで圧縮可能です（コメント除去、パスの簡略化）。公開前に圧縮してサイズを小さくしましょう。
まとめ
SVGの本質は「ベクター、拡大可能、編集可能」です。アイコン、ロゴ、イラスト、チャートにはSVGが最適で、写真にはビットマップが良いです。ビットマップ→SVGはシンプルな図形に適しています。DocsAllのSVG変換ツールはブラウザ側で処理し、ワンクリックでビットマップのロゴをベクターに変換し、その後のマルチサイズ利用に便利です。