ByteScope

SVG to PNG

SVGを一度ビットマップに描いてPNGへ。パスへ戻すことはできない、と知ったうえで使ってください。

ファイルはブラウザから送信されません — 処理はすべてローカルで行われます。

変換先
リサイズ
PNG はロスレス形式のため、品質設定はありません

✓ EXIF、GPS などのメタデータは出力からすべて削除されます。

ここに画像をドロップ

またはクリックして選択 — PNG, JPEG, WebP, GIF, HEIC, AVIF, SVG — ページのどこでも画像を貼り付け(Ctrl+V)できます

SVG を PNG に変換する理由

SVGをPNGにすると失われるもの

これは詰め替えではなくラスタライズです。ChromeはSVGのblobからcreateImageBitmapできないので、ImageConvertTool.rasterizeSvgがnew Image()で読み、naturalWidthとnaturalHeightのcanvasへ描き、そのビットマップをワーカーへ渡します。その瞬間から出力は画素です。パス、グループ、viewBox、currentColor、SVGツリーがまだ必要だったCSSは消えます。あとの拡大は画素の補間であり、ベクター描画のやり直しではありません。PNGがビットマップに対して可逆でも、この一歩は不可逆です。

サイズはエンコード前に決まります。naturalWidthかnaturalHeightが0 — 固有サイズの無いSVG — なら、rasterizeSvgは1024 × 1024に固定し、UIはsvgNoSizeWarningを出します。apps/web/public/og.svgは幅1200・高さ630を宣言しているので、実測はフォールバックではなく1200 × 630です。SVGの文字は、レンダラーが実際に使ったフォントで画素になります。このコードはフォントファイルも外部のimage hrefも取りに行きません。SVGバイトから画像デコーダーが出したものだけを描きます。@font-faceのURLや中の外部PNGが見えるかどうかは、ブラウザがSVGを画像として読むときの方針であり、変換器が実装している処理ではありません。

アニメーションは意図して飛ばします。事前にラスタライズしたビットマップを送るため、convert.worker.tsはSVGに対してImageDecoderのアニメーション探査を開きません。SMILやCSSアニメーションがAPNGになることはありません。canvasの1枚がエンコードされます。

実測でファイルサイズがどう変わったか

2026-09-13、スクリプトはapps/web/public/og.svg(1,809バイト)をsharp/librsvgで1200 × 630にラスタライズし、「最適化 (oxipng)」をオンにして63,223バイトにしました。そのチェックはこのページでは既定でオフなので、初期設定のまま変換するとブラウザ側のPNGの方が少し大きくなるのが普通です。ベクターファイルの約35倍で、想定どおりです。SVGはテキスト、PNGは暗いカードに文字が乗った1200 × 630のビットマップです。Nodeのラスタライザはブラウザのnew Image()とcanvasではないので、フォントが代替されるとバイト数は変わり得ます。寸法はこのファイルのwidth/height属性に対してrasterizeSvgが使うものと同じです。小さなロゴSVGが63 KBのPNGになるわけではありません。このサンプルはサイトの1200 × 630のOpen Graph図です。

SVGをPNGにしない方がよい場面

まだあらゆるサイズで使うロゴやアイコンは変換しないでください。PNGは一つの解像度で、マスターはSVGのままでした。パスや文字として編集し続ける絵も向きません。意味が外部フォントや画像に依存するSVGは、インライン化してスナップショットを確認するまで変換しないでください。このツールはそれらを取りに行きません。CMS、メール、<img>先がSVGを拒むとき、ラスタ編集用の1枚が要るときにPNGを選び、SVGは横に残してください。

変換はすべてブラウザ内で完結します — アップロードなし、待ち行列なし、ウォーターマークなし。ファイルはいくつでもドロップでき、個別またはZIPでダウンロードできます。

よくある質問

あとからPNGを拡大してもSVGのようにシャープですか?

なりません。PNGの輪郭はラスタライズしたサイズの画素です。拡大は補間です。任意の倍率がまだ要るならSVGを残し、ホストがベクターを受けないときだけPNGにします。

幅も高さも無いSVGはどのサイズで描かれますか?

naturalWidthかnaturalHeightが0なら、rasterizeSvgは1024 × 1024で描き、固有サイズが無い旨の警告を出します。public/og.svgのように幅と高さを宣言したファイルは、その1200 × 630を使います。

SVGのSMILやCSSアニメはアニメPNGになりますか?

なりません。メインスレッドがビットマップを1枚切り、ワーカーはmsg.bitmapがあるときアニメーション探査を飛ばします。エンコードされるのはその静止画だけです。

画像はどこかにアップロードされますか?

いいえ。変換はcanvas APIとWeb Workerを使ってブラウザ内で行われ、ファイルがデバイスから外に出ることはありません。アップロード工程も待ち行列もなく、ファイルサイズの制限もお使いのマシンのメモリ以外にはありません。

変換後の画像にEXIFメタデータは残りますか?

いいえ — そしてそれは意図した機能です。canvas経由の再エンコードは、GPS位置情報、カメラの機種、タイムスタンプ、カラープロファイルといったすべてのメタデータを除去します。出力に含まれるのはピクセルだけで、画像を公開共有する前に望ましい状態になっています。

多くの画像を一度に変換できますか?

はい。何枚でもファイルをドロップまたは貼り付けてください。それぞれがバックグラウンドで変換され、個別の進捗とダウンロードボタンが付きます。すべてを.zipアーカイブとして一括ダウンロードすることもできます。

変換すると画質は落ちますか?

変換先によります。このコンバーターは、どの形式の組み合わせでも常に生のピクセルにデコードしてから再エンコードします。メタデータが除去されるのも同じ仕組みによるものです。ロスレスの変換先(PNG、および256色の範囲内のGIF)ではデコードしたピクセルと完全に同一のまま保たれ、JPEG・WebP・AVIFでは品質スライダーでトレードオフを調整できます。すでに非可逆の画像を変換すると、劣化がもう一世代ぶん重なります。