本文へスキップ

SVG を PNG に

SVG を透過背景の PNG に、好きな解像度で変換

SVG をフル透過対応の高 DPI PNG に書き出します。幅、高さ、DPI を指定できます。アプリアイコン、Retina 用アセット、Figma や Sketch などのデザインツールへの書き出しに最適です。

ここにファイルをドロップ

新規ファイルの既定値を編集しています

背景
角丸
縦横比1.000

プレビュー

プレビューはありません。ファイルを追加して選択すると結果が表示されます。
ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。

SVG とは

SVG(Scalable Vector Graphics)は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。

SVG は Web における標準のベクター形式です。最新のブラウザはすべて標準で対応し、CSS でスタイルを指定でき、JavaScript や SMIL でアニメーションもできます。同等のラスター画像に比べてファイルサイズも大幅に小さくなります。

PNG とは

PNG(Portable Network Graphics)は、アルファチャンネルによる完全な透過に対応した可逆圧縮のラスター画像形式です。透過 PNG はアイコン、スクリーンショット、イラストなど、輪郭のくっきりした画像や透明な背景が必要な画像に最適です。

SVG とラスター形式の比較

ベクター画像(SVG)とラスター画像(PNG、JPG)は用途が異なります。画像を何に使うかによって適した形式が決まります。

項目SVGPNG / JPGICO / ICNS
拡大縮小解像度に依存しない拡大するとぼやける固定サイズで事前に描画
ファイルサイズ図形やアイコンは小さい解像度とともに増える各サイズの画像の集合
編集テキストやベクターツールで編集可ピクセル単位の編集のみ各サイズを編集して再度まとめる
アニメーションCSS、SMIL、JavaScript限定的(APNG / GIF)非対応
透過対応PNG は対応、JPG は非対応対応(PNG ベース)

SVG を PNG に変換するのはどんなとき

PNG は最も安全に使える汎用ラスター形式です。透過部分のある高解像度の画像が必要なとき、たとえばアプリのスクリーンショット、Web への埋め込み、プレゼン資料、ブログ記事など、可逆のラスター画像が要る場面では SVG を PNG に変換してください。書き出しの目安は 32×32 のアイコンで 1〜3 KB、256×256 で 6〜30 KB、2K 解像度で 200 KB〜1 MB です。完全な透過と可逆圧縮の両方を備えた主要形式は PNG だけです。

SVG から PNG:ファイルサイズと品質のバランス

ファイルサイズ

ベクターの SVG はたいてい数 KB です。32×32 の PNG 書き出しは 1〜3 KB、256×256 で 6〜30 KB、2048×2048 で 200 KB〜1 MB あたりになります。PNG はすべてのピクセルを保存するため、解像度が 2 倍になるとファイルはおよそ 4 倍になります。

PNG が適しているとき

PNG はラスター画像の定番です。アプリのアイコンセット、メール署名、SNS の投稿フォーム、スクリーンショット、プレゼン資料、多くの CMS など、SVG を扱えない相手には PNG を選んでください。透過や輪郭の鮮明さが必要な場面では、JPG ではなく PNG です。

PNG ではなく SVG のままにすべきとき

相手が最新のブラウザ、iOS や Android のネイティブアプリ、ベクターを扱えるデザインツール(Figma、Sketch、Affinity)なら SVG のままにしてください。SVG はどのサイズでも鮮明で、図形主体の絵柄なら同等の PNG よりはるかに小さく、CSS でのスタイル指定やアニメーションもできます。

品質とのバランス

PNG は可逆で、すべてのピクセルがラスター化した結果と一致します。品質は書き出し解像度だけで決まります。幅がおよそ 128 px を下回ると細部や細い線のアンチエイリアスがきれいに出ないことがあり、32 px を下回る場合はピクセルに合わせた別バージョンを用意してください。品質の調整はなく、ファイルサイズは出力サイズと DPI だけで決まります。

SVG を PNG にオンラインで変換する方法

  1. ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
  2. 出力設定(サイズ、DPI、背景、品質、トレースの細かさ)を指定すると、プレビューがその場で更新されます。
  3. 「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。

プライバシー:ファイルはブラウザから出ません

ファイルが端末の外に出ることはありません。変換は JavaScript と WebAssembly を使ってすべてブラウザ内で実行されます。アップロードもサーバー処理もないため、ファイルに関する情報がどこかへ送られることはありません。

何もアップロードされないため、社外秘のロゴ、社内文書、未公開の顧客作品にも安心して使えます。使用中に端末へキャッシュされるので、初回訪問のあとはネットワーク接続がなくても動作します。

よくある質問

PNG は SVG の透過を保てますか?

はい。「透過」の背景を選べば、SVG の透明な部分がそのまま PNG に反映されます。PNG はフルアルファに対応しているため、半透明の図形やぼかした輪郭も保たれます。

どの DPI で書き出せばよいですか?

96 DPI が標準的な 1 倍の表示に対応します。Retina や高 DPI 画面には 192 や 288 を、印刷向けならさらに高い値を選んでください。DPI はピクセル数に掛かるだけで、元がベクターなのでどの倍率でも品質は落ちません。

PNG はどのくらいの大きさまで書き出せますか?

64 メガピクセルまでで、1 辺は 16,384 px を超えられないため、8000×8000 は可能です。DPI 倍率もこの上限に含まれ、4000×4000 を 2 倍の DPI で書き出すと上限に達します。書き出しが拒否されたり白紙になったりする場合は、幅か DPI を下げてください。