SVG はベクター画像です。図形をピクセルではなく数式で表すため、どんなサイズに拡大してもぼやけません。一方 PNG はラスター画像で、固定されたピクセルの格子です。SVG を PNG に変換する(「ラスタライズ」と呼びます)とは、無限に拡大できるパスを、ある決まったピクセル数に固定することです。そして最も重要な判断が、どのサイズでレンダリングするか——これが PNG が鮮明になるかぼやけるかを決めます。
なぜ先にサイズを選ぶ必要があるのか
写真には固有の解像度がありますが、SVG にはありません。PNG に書き出すときは、必ず何かがピクセル寸法を決めなければなりません。ツールが SVG 内蔵の width/height(アイコンでは 24×24 のように小さいことが多い)をそのまま使うと、小さくて眠い PNG になります。最初に大きめの出力幅を選べば、同じベクターが 512・1024・2048 ピクセルで鮮明にレンダリングされます。これこそ「svg to png 高画質」といった検索が本当に求めているものです。
どの解像度を選ぶか
| 用途 | 推奨する幅 |
|---|---|
| favicon・小さな UI アイコン | 256〜512 px |
| ブログ画像・アプリ素材 | 1024 px |
| 印刷・メインビジュアル・大きな図 | 2048 px 以上 |
大きいほど鮮明ですが、ファイルも大きくなります。迷ったら、実際に表示するサイズの 2 倍でレンダリングしましょう——高精細ディスプレイ(Retina や多くのスマホ)では、その分の細部が活きます。
PNG・JPG・WebP、どれにする?
- SVG を PNG に変換 — 可逆で透過も保持。ロゴ・アイコン・透明背景が必要なものに最適です。
- SVG を JPG に変換 — ファイルは小さくなりますが透過非対応(空白は白になります)。単色背景の平面イラストに向きます。
- SVG を WebP に変換 — 最新フォーマットで、小さく透過にも対応。Web サイトに最適です。
透明背景の SVG を JPG に変換すると、透明部分は白で塗りつぶされます。透過を残したいときは PNG か WebP を選んでください。
ブラウザ内で、プライバシーを守って
私たちの変換ツールはすべて端末上でラスタライズします——SVG がアップロードされることはありません:
- SVG ファイルを 1 つ以上ドロップします。
- 出力幅を選びます。高さは縦横比から自動計算されます。
- 結果をダウンロード、または複数まとめて zip に。
逆方向:PNG からベクターへ
逆に、ロゴの PNG を拡大自在のベクターに戻すのは「トレース」という別の処理です。それが目的なら、PNG を SVG に変換する方法を参照してください。ベクター化が得意なケースと不得意なケースを説明しています。
文字と細い線を鮮明に保つ
ラスタライズした SVG を静かに台無しにするものが2つあります。1つはフォントです。SVG がレンダラーに無いフォントを参照していると、文字はこっそり代替フォントに置き換わり、レイアウトもずれます。ラスタライズ前に SVG 内の文字をアウトライン(パス)化しておけば、どこでも同じ字形になります。2つ目は極細の線です。24×24 の 1px の線は 512 で約 21px になり鮮明ですが、実際に表示するより小さいサイズで描くと、ブラウザがビットマップを拡大することになります——そのぼやけが、しばしばフォーマットのせいにされます。
DPI についての補足
PNG が持つのはインチではなくピクセルなので、画面では「DPI」は無関係です——1024px の画像はタグが 72 でも 300 でも 1024px です。DPI が効くのは印刷だけで、実寸 × 目標 DPI = ピクセルです。幅 4 インチ・300 DPI で印刷する図には 1200px、150 DPI なら 600px が必要です。印刷用途では仕上がり寸法から逆算し、少なくともその分のピクセルで書き出しましょう。
よくある間違い
- **SVG 内蔵の小さいサイズをそのまま使わせる。**24×24 のアイコンは 24×24 の PNG になります。出力幅は必ず自分で指定しましょう。
- **小さい PNG を拡大して、SVG を再レンダリングしない。**ビットマップの拡大はぼやけるだけ。目標サイズでベクターを再ラスタライズすれば鮮明です。
- **透明な SVG を JPG に変換する。**透明は白で埋まります。残すなら SVG を PNG に変換か WebP を。
よくある質問
書き出した PNG に白背景が付くのはなぜ? SVG 自体に背景の矩形があるか、透明非対応の形式で書き出したかのどちらかです。本当に透明な書き出しには PNG か WebP が必要です。
PNG が大きすぎます——どう小さくする? 必要な大きさだけで描き、画像圧縮に通せば、見た目の劣化なくファイルを小さくできます。
形式全体の比較はWeb に最適な画像形式が PNG・JPG・WebP を並べて解説しています。アイコンが目的ならfavicon の作り方をどうぞ。