SVG を PNG に変換

何ができるか

このツールは、SVG コードや .svg ファイルを PNG、JPG、WebP 画像に変換します。マークアップを貼り付けるかファイルをドロップし、倍率か正確な幅を選んで、ビットマップをダウンロードします。レンダリングはブラウザ内で行われるので、アイコン、ロゴ、図がパソコンの外に出ることはありません。

アプリアイコン、SNS 用の画像、スライド、文書、メールの署名、古いソフトウェアなど、SVG を受け付けない場所で役立ちます。市松模様の上にリアルタイムのプレビューが表示されるので、どこが透明なのかが正確にわかります。

使い方

1. <svg> コードをエディターに貼り付けるか、アップロード をクリックしてファイルを開くか、ページにファイルをドラッグします。サンプル を押すと小さなロゴが読み込まれます。
2. サイズ を選びます。1× は SVG 自身の寸法を使い、2×〜4× はそれを倍にします。または カスタム幅（px） をピクセル単位で入力します。高さは縦横比に従います。
3. 形式 を選びます。透明度付きのロスレス出力なら PNG、写真や互換性重視なら JPG、小さなファイルなら WebP です。
4. 背景 を選びます。透明、白、または任意の色です。
5. ダウンロード をクリックします。プレビューの下の行には、最終的なピクセルサイズ、形式、ファイルサイズが表示されます。

サイズの決まり方

ツールはルートの <svg> 要素を調べます。px、pt、mm、cm、in、em で指定された width と height はピクセルに変換されます。これらがない場合やパーセントで指定されている場合は、代わりに viewBox の幅と高さを使います。その後、選んだ倍率またはカスタム幅を適用し、どのブラウザでも同じように描画されるよう、SVG を明示的なピクセルサイズで書き直します。

例

viewBox="0 0 24 24" を持ち width も height もないアイコンは、1× で 24 × 24 の PNG になります。4× なら 96 × 96、カスタム幅を 512 にすると、アプリストアのアイコンに使える 512 × 512 の PNG になります。拡大ではなくベクターからレンダリングしているので、どのサイズでも完全にくっきりしています。

ヒント

• 無効な XML は行番号付きで報告されるので、問題の箇所にすぐジャンプできます。
• 埋め込まれたラスター画像（<image href="data:...">）は使えますが、外部リンクは使えません。
• テキストにはパソコンにインストールされているフォントが使われます。どこでもピクセル単位で同じ結果にしたい場合は、先にデザインツールでテキストをアウトライン化してください。
• 出力できる最大サイズはブラウザの canvas サイズで制限され、1 辺あたり約 16,000 ピクセルです。