# SVG to PNG

> SVGを端末内でPNGへラスタライズ。実測のapps/web/public/og.svgは1200×630で1,809バイトが63,223バイトに。パスも文字もアニメもベクターのままでは残りません。

- URL: https://bytescope.dev/ja/image-convert/svg-to-png/
- Locale: ja · Also: [en](https://bytescope.dev/en/image-convert/svg-to-png.md) · [zh-Hant](https://bytescope.dev/zh-Hant/image-convert/svg-to-png.md)
- Runs: ファイルはブラウザから送信されません — 処理はすべてローカルで行われます。
- Requires: Any modern browser (Chrome, Edge, Firefox, Safari), desktop and mobile.
- Updated: 2026-09-08

## What it does

### 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でダウンロードできます。

## Limits

これは詰め替えではなくラスタライズです。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枚がエンコードされます。

## FAQ

### あとから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では品質スライダーでトレードオフを調整できます。すでに非可逆の画像を変換すると、劣化がもう一世代ぶん重なります。