SVG から PNG への変換ガイド：倍率を選んで鮮明に書き出す

SVG を PNG にする必要がある場面

PNG か JPG しか受け付けない場所は多くあります。アプリストアの素材、SNS 用画像、スライド、EC の管理画面、印刷店などは SVG をそのまま扱えません。ロゴ、アイコン、QR コードがベクターでしか存在しないなら、アップロードや文書への貼り付けの前にビットマップへ変換する必要があります。

固定サイズで出したい場合も理由になります。同じアイコンを、通常画面用に 1x、高精細ディスプレイ用に 2x、印刷や再加工用により大きく、と書き分けることがあります。SVG から倍率ごとに再描画すれば、小さい PNG を後から拡大するより輪郭がきれいです。透明が必要な場合も、PNG ならアルファチャンネルを保てます。

倍率と書き出し設定の決め方

SVG 自体の width/height を確認します。出力サイズは通常、元の寸法に倍率を掛けた値です。24×24 のアイコンを 4x にすると 96×96 になります。viewBox だけで width/height がないファイルは、失敗したりサイズがずれたりするため、編集ソフトで寸法を追加してから書き出します。

倍率は最終用途から決めます。Web やアプリのアイコンは 1x か 2x で足りることが多く、印刷では仕上がりサイズと DPI から必要ピクセルを計算してから倍率を選びます。4x が最適とは限りません。ファイルは大きくなり、canvas の上限に触れる可能性もあります。書き出し後は 100% 表示で確認します。

• SVG に width/height があるか確認する
• 最大倍率ではなく、必要なピクセル数から選ぶ
• 透明が必要なら透明背景を有効にする

代替手段と、変換しないほうがよい場合

Web やアプリのアイコン、ロゴは、できるだけ SVG のまま残すべきです。ファイルが軽く、拡大しても鮮明で、CSS で色も変えられます。PNG にするのは、相手が SVG を受け付けない場合や、プレビュー・印刷用のビットマップが必要な場合だけです。一度ビットマップにすると、通常の画像と同じ解像度の制約を受けます。

SVG 内の外部画像、リモートフォント、外部 CSS は、画像として読み込むとセキュリティ制約で遮断されやすく、文字や画像が欠け、スタイルも崩れます。文字をパス化し、画像を base64 で埋め込むか、リソース埋め込み対応のツールを使ってください。スクリプトやアニメーションも静止画 1 枚になります。