ピクセルアートはPNGとSVGのどちらで書き出す？
· 更新 2026年7月28日 · PixelTool Team
Web、ゲーム、SNS、印刷、拡大、再編集でPNGとSVGのどちらを選ぶべきか比較します。
書き出しPNGSVG
PNGとSVGは同じピクセルアートを表示できますが、仕組みが異なります。PNGは色付きピクセルを保存し、SVGは図形を描く命令を保存します。
すぐ共有するならPNG、複数サイズで使うならSVGが便利です。
PNGが向く場面
PNGはSNS、チャット、ゲームエンジン、画像編集ソフトで広く使えます。
- アバターや投稿画像
- ゲームのテクスチャやスプライト
- 透明ピクセルが必要
- ラスターソフトで再編集
- 最終サイズが決まっている
PNGは可逆圧縮なので、JPEGのような輪郭ノイズを加えません。ただし128×128を350×350で表示すると、補間でぼける場合があります。整数倍率とニアレストネイバーを使いましょう。
SVGが向く場面
SVGのピクセルアートは、各ブロックを長方形として保持できます。
- 同じ絵を複数サイズで使う
- レスポンシブWebに置く
- 単純な作品を大判出力する
- ベクターソフトで形を編集する
一方、すべてのSNSやゲーム環境がSVGを受け付けるわけではありません。
SVGが常に軽いわけではない
細かな変換では長方形が大量に増え、SVGの方がPNGより大きくなることがあります。大きな平面を持つ単純なアイコンはSVG向きです。
- 単純で平面的：SVGが有利なことが多い
- 高解像度で細かい：PNGが有利なことが多い
- 写真に近い変換：SVGの記述が複雑になりやすい
透明とエッジ
両方とも透明背景に対応します。クラシックなドット絵では、完全に不透明なブロックと完全に透明な空白が扱いやすく、半透明の縁は背景を替えたときにハローを生みます。
PixelTool では同じグリッドから両形式を書き出せます。私はすぐ使うファイルを PNG、将来拡大する可能性がある場合の控えを SVG にします。
| 用途 | 第一候補 |
|---|---|
| SNS・アバター | PNG |
| ゲーム素材 | PNG |
| レスポンシブWeb装飾 | SVG |
| 単純な絵の大判印刷 | SVG |
| 最大限の互換性 | PNG |
| ベクターで再編集 | SVG |
一つに決め続ける必要はありません。今の配布先に合う形式を選び、必要ならもう一方も保存しておきます。