PNG vs SVG

残るもの

失われるものはありません。PNG も SVG も中身を劣化なしに保持します。この変換が変えるのは包み方であって品質ではないので、劣化が積み重なる心配をせずに何度でも繰り返せます。

透明は保たれます。PNG も SVG もアルファチャンネルを扱えるので、切り抜いた部分は切り抜かれたままで、その後ろに何かが塗られることはありません。

変換先の形式が追加で扱えるもの

SVG は作業のための形式で、PNG は完成したものを渡すための形式です。戻ってくるのはページの絵ではなく、編集できる文字です。たいていはそれがこの変換の理由であり、同時にこの変換の限界でもあります。

SVG はアニメーションを持てますが、PNG ファイル は 1 フレームしかありません。出てくるのは絵 1 枚のファイルで、それがもっと多くを扱えたはずの形式に入っている、という状態です。

SVG はレイヤーを扱えます。PNG ファイル はすでに統合された状態で入ってくるので、結果もレイヤー 1 枚のままです。構造を取り戻すには、手で組み直すことになります。

ファイルサイズと品質

SVG はサンプルを生のまま持つので、ファイルは大きく膨らみ、その見返りはありません。この向きに意味があるのは、受け取る側のプログラムが PNG を扱えない場合だけで、実際たいていはそれが理由です。

どちらの形式が何のためのものか

PNG は PNG Development Group の形式です（1996 年に登場）。 記録は 1 チャンネルあたり 16 ビットです。

SVG は W3C の形式で、2001 年から使われています。規定は SVG 1.1 です。Inkscape、Adobe Illustrator、Figmaがこの形式を読めます。

失われるもの

SVG は図形を記述し、PNG は点を扱います。結果は書き出した大きさでは鮮明で、それより大きくすると鮮明ではありません。あとから拡大しても、あいだの点は作り出すしかないからです。この変換で書き出しサイズがほかの多くの変換より重いのは、そのためです。

PNG が持てるのは静止した 1 フレームだけです。動く SVG ファイル からは最初のフレームだけが残り、あとは落ちます。この変換はそこから 1 枚の絵を取り出すもので、動きを運ぶものではありません。

レイヤーは統合されます。SVG はそれを別々のまま編集できる状態で保ちますが、PNG が保つのは結果です。つまり、どこかのレイヤーを動かす必要のある作業は、先に済ませておく必要があります。

残るもの

失われるものはありません。SVG も PNG も中身を劣化なしに保持します。この変換が変えるのは包み方であって品質ではないので、劣化が積み重なる心配をせずに何度でも繰り返せます。

透明は保たれます。SVG も PNG もアルファチャンネルを扱えるので、切り抜いた部分は切り抜かれたままで、その後ろに何かが塗られることはありません。

ファイルサイズと品質

PNG は同じサンプルをおよそ半分の場所に収めます。失われるものはなく——展開すれば SVG ファイルがビット単位で戻ります——だからこそ、取っておきたいものの置き場としてはこちらが優れています。

どちらの形式が何のためのものか

SVG は W3C の形式です（2001 年に登場）。 SVG 1.1 で規定されています。ファイルが、それを書いた道具より長く生きなければならないなら、この一点には値打ちがあります。

PNG は PNG Development Group の形式で、1996 年から使われています。規定は ISO/IEC 15948 です。Adobe Photoshop、GIMP、Paint.NETがこの形式を読めます。