SVGとは？WebとUIデザインでの活用方法
SVG（Scalable Vector Graphics）はXMLベースのベクター画像フォーマットです。どんなサイズに拡大縮小しても画質が劣化せず、CSSやJavaScriptで動的に操作できるためWebアイコン・ロゴ・チャートグラフに最適です。
SVGがWebに向いている理由
PNGやJPGはラスター形式でピクセル数が固定なため、Retinaディスプレイ（2x・3x）での表示に高解像度版を別途用意する必要があります。SVGはベクター形式なのでどの解像度でも鮮明に表示され、Retina対応が不要です。また通常のHTMLのように`fill`や`stroke`をCSSで変更したりJavaScriptでアニメーションさせたりできます。
SVGの最適化（不要なメタデータの削除）
Figma・IllustratorからエクスポートしたSVGにはエディタ固有のメタデータや冗長なパスが含まれています。SVGO（SVG Optimizer）で最適化するとファイルサイズを30〜80%削減できます。SVG ViewerではSVGO v3を使った最適化を内蔵しており、貼り付けたSVGをワンクリックで最適化してコードをコピーできます。
アイコンフォントとSVGアイコンの違い
Font AwesomeなどのアイコンフォントはWebフォントとして配信しますが、SVGアイコンは必要なものだけをインラインで使えるためバンドルサイズを最小化できます。ReactプロジェクトではSVGRでSVGをReactコンポーネントに変換するパターンが一般的です。SVG Viewerでは個別にパスを確認・編集してエクスポートできます。
ドラッグ&ドロップとPNGエクスポート（デスクトップ版）
デスクトップ版SVG ViewerではSVGファイルをドラッグ&ドロップで開き、任意の倍率（1x・2x・3x）でPNGとして書き出せます。ファイルマネージャーへのネイティブ保存ダイアログに対応しており、アプリアイコンの書き出しや印刷用高解像度PNG生成に活用できます。