SVG → PNG 書き出しの完全ガイド — 1×/2×/3× とフォールバック対策

1. 1

   SVG をドロップ

   .svg を 1 ファイルブラウザツールにドラッグ。最大 5MB、SVG 1.1 標準機能対応。

2. 2

   目標サイズを指定

   最大表示サイズを入力し、1×/2×/3× をチェックして対応 PNG を出力。

3. 3

   背景を設定

   既定は透過。配信先がアルファ非対応なら単色背景に切替。

4. 4

   ZIP でダウンロード

   全書き出し PNG を `name@1x.png`、`name@2x.png` などの名前で 1 つの ZIP に格納。

よくある質問

• 書き出し PNG がブラウザの SVG 表示と違って見える

  フォントフォールバックが最頻原因。SVG エディタで文字をパス化してから書き出すか、`@font-face` data URI でフォントを埋め込んでください。

• 4× 以上でも書き出せる?

  ツールは 8× まで対応。3× を超えるとファイルサイズは二乗で伸びる一方、現存ディスプレイでの可視品質は頭打ちです。

• SVG に埋め込まれたラスター画像は?

  対応します — base64 埋込ラスターはそのまま通過し、書き出し解像度で PNG に再エンコードされます。

• 透過は本当に保持される?

  はい。SVG キャンバスは既定で透明、PNG 出力は全ピクセルでアルファチャンネルを保持。配信先が要求するときだけ平坦化を。

• JPG に変換することもできる?

  可能ですが透過がない場合のみ — JPG にアルファチャンネルはありません。ツールに JPG 出力チェックボックスがあります。

• ファイルはアップロードされる?

  いいえ。SVG パース、ラスター、ZIP 化のすべてが WebAssembly でブラウザタブ内で実行されます。