SVGからPNGへの変換

SVGをブラウザ内で、任意の倍率や正確な幅・高さのPNGに変換。背景は透明または単色で、viewBoxだけのSVGにも対応しています。

ここに SVG ファイルをドロップするか、クリックして選択

クリップボードから画像を貼り付けることもできます（Ctrl+V / ⌘V）

SVG コード

出力サイズ倍率（×）

背景を透明にする

画像として描画する際、SVG が参照する外部の画像・フォント・スタイルシートは読み込まれません。事前に埋め込むか、テキストをパスに変換してください。

すべてブラウザ内で実行されます。データがアップロードされることはありません。

SVGからPNGに変換とは？

SVGのベクターグラフィックをPNG画像としてレンダリングします。.svg ファイルをアップロードするかSVGコードを貼り付け、倍率（1×〜4×または任意の値）か固定の幅・高さを選び、背景を透明のままにするか色で塗りつぶします。ベクターは目標のサイズで再レンダリングされるため、PNGはどんな解像度でも鮮明なままです。

SVGからPNGに変換の使い方

SVGファイルをドロップまたは選択するか、SVG コードにSVGのマークアップを貼り付けます。
検出された固有サイズ（width/heightから、viewBoxから、または既定の300×150）を確認します。
出力サイズで、倍率または固定の幅/高さを選び、値を入力します。
背景を透明にするをオンのままにするか、チェックを外して背景色を選びます。
PNGを logo@2x.png のような名前でダウンロードします。

例

入力

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12"><rect width="24" height="12" fill="#ff0000"/></svg> at scale 2

出力

48×24 PNG, solid red (intrinsic size 24×12 taken from the viewBox)

SVGからPNGに変換を使うべき場面

アプリ、SNS、ドキュメント、SVGを受け付けないプラットフォーム向けにPNGのアイコン、ロゴ、イラストを作るときに使います。Webでは、SVGのほうが小さく解像度非依存なので、可能な限りSVGを使い続けてください。外部のフォントや画像に依存するSVGは、それらなしでレンダリングされます。

SVGからPNGに変換の仕組み

ツールはルートの <svg> 要素の width、height、viewBox を読み取って固有サイズを求めます（pt、mm、inなどの絶対単位はpxに換算され、パーセントはviewBoxにフォールバックします）。次に、ルート要素を正確な目標の幅と高さで書き換え（描画が拡縮するようviewBoxがなければ追加）、画像として読み込み、そのサイズのcanvasに描画します。そのため、ベクターは小さなビットマップの拡大ではなく、フル解像度でラスタライズされます。