SVG ファイルをドラッグするか、クリックして選択
SVG
仕組み
SVG はベクター形式で、図形を座標で記述するため、どんなサイズでも鮮明に描画できます。一方 PNG や JPG はピクセル数が固定されたビットマップです。ラスタライズとはまさにその工程で、解像度を決めてベクターをそのピクセル格子の上に描くことを指します。
そのため解像度は変換の後ではなく前に決めます。このツールは SVG の width と height を指定サイズに書き換えてから描画するので、小さな画像を引き伸ばすのではなく、ブラウザーがその倍率で曲線を描き直します。倍率（2×、4× など）でも、ピクセル単位の正確な幅と高さでも指定できます。
PNG は透明度を保持しますが、JPG は対応していないため、透明部分は選んだ背景色で塗りつぶされます。描画はすべてブラウザー内の Canvas で行われ、ファイルも SVG コードもサーバーには送信されません。
例
<svg viewBox="0 0 24 24" width="24" height="24">…</svg>PNG 96 × 96 px24 px のアイコンを 4× で変換すると 96 × 96 px になり、高密度ディスプレイでよく使われるサイズになります。<svg viewBox="0 0 1200 630">…</svg>JPG 1200 × 630 pxwidth と height を持たない SVG は viewBox からサイズを取ります。ここでは SNS のプレビュー画像として 1× でラスタライズしています。ユースケース
- SVG を受け付けないアプリストアや Web マニフェスト向けに PNG アイコンを用意する。
- ベクターのロゴを背景透過の PNG に変換し、プレゼン資料や文書に貼り込む。
- SVG の図やグラフを JPG に書き出して、メールに添付したりベクター非対応のサービスにアップロードしたりする。
- 同じアイコンの @2x・@3x バージョンを高密度ディスプレイ向けに用意する。
- SVG のテンプレートから、サイトのプレビュー画像（Open Graph）を作る。
よくある質問
どの解像度を選べばよいですか？
最終的な用途に合わせます。通常の画面なら表示サイズそのままで十分で、高密度ディスプレイならその 2 倍か 3 倍が目安です。印刷用途では、インチ単位の寸法に 300 を掛ければ 300 dpi になります。
SVG が思っていたサイズにならないのはなぜですか？
初期サイズは width と height 属性から決まります。これらが無い、あるいはパーセント指定の場合は viewBox の比率が使われます。どちらも無ければブラウザーは 300 × 150 px と見なします。カスタムモードにすれば、その値を無視して正確な幅と高さを入力できます。
透明度は保持されますか？
PNG では、背景を透明にするオプションを有効のままにしておけば保持されます。JPG はアルファチャンネルを持たないため、必ず単色の上に描画されます。既定は白ですが変更できます。
外部の画像やフォントを使った SVG が失敗するのはなぜですか？
画像として描画される SVG は他ドメインのリソースを読み込めず、ブラウザーがセキュリティのため書き出しを止めます。解決策は、それらを SVG 自体に埋め込むことです。画像はデータ URI に、テキストはパスに変換します。
PNG から SVG に戻せますか？
直接は戻せません。ラスタライズするとベクター情報は失われ、ピクセルだけが残ります。曲線を取り戻すにはトレース（ベクター化）が必要ですが、得られるのは近似的な形状であって元のデータではありません。元の SVG は必ず保存しておきましょう。