SVGからPNGへの変換ツール

このツールはSVGのベクター画像をPNGのラスター画像に変換します。SVGファイルをドロップするかコードを貼り付け、倍率を選ぶ(または幅を直接指定する)だけでPNGをダウンロードできます。

サイズはどうやって決まる?

まずSVGのwidth・height属性を見て、120pxや48のような絶対値がどちらにも指定されていればそれを使います。どちらかが未指定、または%指定の場合はviewBox属性を代わりに参照し、片方の値しか使えないときはアスペクト比からもう片方を割り出します。どちらの情報もない場合は300x150になります。これはブラウザが<img>にサイズを指定しなかったときに使うデフォルト値と同じです。ここから1x・2x・4xの倍率を選ぶとその基準サイズが単純に何倍かされ、あるいは幅を直接入力すると高さも同じアスペクト比で自動的に決まります。

SVGはどこかにアップロードされる?

されません。処理はすべて手元の端末で完結します。ブラウザが見えないキャンバス要素にSVGを描画し、そのピクセルを読み取ってPNGを組み立てるため、ファイルがサーバーに送信されることはありません。これはSVGを純粋な画像として扱うことも意味しており、SVG内に埋め込まれた<script>タグやイベントハンドラは実行されません。ページに要素として追加する場合と違い、キャンバスへの描画ではドキュメントとして実行されないためです。

壊れたSVGを渡すとどうなる?

このツールが処理できるのは、少なくとも認識可能な<svg>開始タグを含むコードです。SVGらしさのないテキストは、描画を試みる前に弾かれます。それ以外の部分の描画はブラウザ自身のSVGエンジンに任されるため、入れ子のグループやグラデーション、埋め込みフォントや画像を含む、整った形式のSVGであれば、ファイルを直接開いた場合と同じように表示されます。widthやheightが欠けている程度なら問題になりませんが、XMLとして本当に壊れている場合はブラウザがそもそも文書として解析できないため描画は失敗します。

どんな場面で使える?

古いCMSやメール署名、ゲームエンジンなど、SVGを受け付けない場所にロゴやアイコンをPNGとして使いたいときに便利です。同じアイコンを1x・2x・4xで書き出せば、画面密度の異なる端末向けに複数サイズのPNGが必要なアプリアイコンやファビコンにも対応できます。2つの画像形式の違いと使い分けについては、MDNの画像ファイル形式ガイドを参照してください。