SVG→PNG/JPG変換（ベクター画像のラスタライズ書き出し）
SVGファイルまたはSVGコードをPNG・JPG画像に変換できる無料ツールです。書き出しサイズを自由に指定でき、変換はすべてブラウザ内で完結します。
PNGとJPGはどちらを選ぶべき？
| 形式 | 特徴 | おすすめの用途 |
|---|---|---|
| PNG | 可逆圧縮で画質の劣化がなく、透明な背景をそのまま保持できます。 | ロゴ・アイコン・イラストなど、透明部分やシャープな輪郭を保ちたい場合 |
| JPG | 非可逆圧縮でファイルサイズを小さくできますが、透明部分は指定した背景色で塗りつぶされます。 | 写真的な背景を含む画像や、ファイルサイズを優先したい場合 |
SVG→PNG/JPG変換ツールとは
SVG→PNG/JPG変換ツールは、SVG（ベクター画像）ファイルまたはSVGコードを、任意のピクセルサイズを指定してPNGまたはJPG画像に変換できるツールです。SVGはアイコン・ロゴ・イラストなどで広く使われる形式ですが、そのままではWebフォームへの画像アップロードや、SVG非対応のアプリ・古い環境での表示に使えない場面があります。このツールを使えば、そうした場面で必要な一般的な画像形式に手早く変換できます。
変換処理はブラウザのCanvas API機能を使ってクライアントサイドで完結し、SVGファイルやコードが外部のサーバーへ送信されることはありません。ベクター形式であるSVGの性質上、書き出し時のピクセルサイズをユーザー自身が指定する必要があり、このツールでは元のSVGから検出した推奨サイズを初期値として表示しつつ、自由に変更できるようにしています。
使い方
- SVGを読み込む ファイルを選択（ドラッグ＆ドロップも可）するか、SVGコードを直接貼り付けます。
- 出力形式を選ぶ PNG（透明保持）またはJPG（背景色で塗りつぶし）を選びます。
- 書き出しサイズを調整する 幅・高さを直接入力するか、倍率ボタン（1x/2x/4x）で一括変更します。
- 変換してダウンロードする 「変換する」ボタンを押すとプレビューが表示され、そのままダウンロードできます。
使いこなすためのヒント
- SVGファイルにwidth/height属性やviewBoxが定義されていない場合、初期サイズは512×512pxになります。書き出しサイズは自由に変更できます。
- 「倍率」ボタン（1x/2x/4x）は、SVGから検出した元のサイズを基準に書き出しサイズを一括で変更します。アイコンをRetina（高解像度）ディスプレイ向けに2倍・4倍サイズで書き出す用途に便利です。
- 透明な背景を保ちたい場合はPNGを選んでください。JPGは透明を扱えないため、透明部分は指定した背景色（既定は白）で塗りつぶされます。
- 複雑なグラデーションやフィルター効果を含むSVGでも、ブラウザが対応していれば見た目どおりに書き出せます。ただしSVG内で外部フォント・外部画像を参照している場合、ブラウザがそれらを読み込めないと正しく描画されないことがあります。
- 縦横比を固定したまま幅または高さだけを変更したい場合は「縦横比を固定」のチェックを入れたままにしてください。外すと幅・高さを個別に指定できます。
活用シーン
アイコン・ロゴのラスター化
デザインツールから書き出したSVGアイコンを、SVGに対応しないシステムやアプリへ組み込む前にPNGへ変換できます。
Webフォームへの画像アップロード
SVG形式のアップロードを受け付けないフォーム・サービスに対応するため、事前にPNG/JPGへ変換しておけます。
Retina（高解像度）ディスプレイ向けの複数サイズ書き出し
倍率ボタンで1x/2x/4xのサイズを素早く用意し、高解像度ディスプレイ向けのアイコンセットを作成できます。
SNS・資料への貼り付け
SVGを直接貼り付けられないSNSの投稿画面やスライド資料に使うため、一般的な画像形式へ変換できます。
用語集
- SVG（Scalable Vector Graphics）
- 図形を座標・パスの数式としてXML形式で記述するベクター画像形式です。拡大・縮小しても輪郭がギザギザになりません。
- ラスタライズ
- ベクター形式の画像を、指定したピクセルサイズのドットの集合（ラスター画像）に変換する処理です。
- viewBox
- SVGの内部座標系がどの範囲を表すかを定義する属性です。width/height属性が無い場合の寸法の目安として使われます。
- アルファチャンネル
- 画像の各ピクセルが持つ透明度の情報です。PNGは保持できますが、JPGは持たないため変換時に背景色で塗りつぶされます。
- Canvas API
- ブラウザがJavaScriptから画像の描画・加工を行うための標準機能です。このツールはCanvas APIのみでSVGのラスタライズを行い、追加のライブラリを必要としません。
よくある質問
余談ですが ― SVGはXMLで書かれたテキストファイル
SVG（Scalable Vector Graphics）は、PNGやJPGのようにピクセルの集合として画像を保存する形式ではなく、図形の輪郭を数式的な座標・パスとしてXML形式のテキストで記述する形式です。そのため拡大・縮小してもギザギザが出ず、テキストエディタで開いて内容をそのまま読むこともできます。ロゴやアイコンなど、様々な画面サイズで使い回すことが多い画像に向いている理由がこの構造にあります。
一方でSVGは「解像度」という概念を持たず、あくまでベクター（数式的な図形の集合）として保存されています。PNGやJPGのような一般的な画像形式で書き出す（ラスタライズする）際には、どのピクセルサイズで描画するかを別途決める必要があります。このツールで幅・高さを指定できるのは、SVGの本来の性質に由来する仕様です。
SVGのwidth/height属性が指定されていない、あるいは相対単位（%等）で書かれているファイルも少なくありません。そうした場合の代わりの目安として使われるのがviewBox属性で、これは「SVG内部の座標系がどの範囲を表すか」を定義するものです。多くのツールがwidth/heightの欠落時にviewBoxの値をピクセルサイズの代用として扱っており、このツールも同じ考え方を採用しています。