JPEGやPNGでは、画像サイズ(1440x990など)や画質などで容量が大きくなることを知っています。
しかし、SVGも同じく「画像」という呼び方をしているのにSVG自体の画像を大きくしたり小さくしても画質が変わらないという特徴を持っているのに容量が大きく変わることはありません。
そこで今回はSVGってなんだっけ?というところから改めて確認をしてみることにしました。
初心に帰ってみるのも大事ですね
(あと新人に説明するためにも)
早速AIに聞いてみた
結論から言うと、SVGのファイル容量は「画像の大きさ(ピクセル数)」ではなく、**「ファイルの中に書かれているコード(文字)の量」**で決まります。
PNGやJPEGとSVGでは、画像を作る仕組みが根本的に異なるため、容量の決まり方も全く違います。わかりやすく解説しますね。
PNGやJPEG(ラスター画像)の容量の決まり方
画像の寸法(解像度)を大きくすればするほど、必要な「点」の数が増えるため、比例してファイル容量も重くなります。SVG(ベクター画像)の容量の決まり方
**「図形を描くための数式や命令が書かれたテキスト(文字)ファイル」です。内部はXMLというプログラミング言語のようなコードで書かれています。
容量の決まり方: ファイル内に記述されている「コードの文字数」**がそのままファイル容量になります。文字が多ければ重くなり、少なければ軽くなります。
とのこと。
つまり、なぜ拡大縮小しても容量が変わらないのか?という疑問に対しては
「コードの文字数が容量として計算されており、その文字数が増えない限りは大きくならない」が答えになるようです。
イメージとしては以下↓
// rect x="0" y="0" width="10" height="10" fill="red"
これを1000倍の大きさに拡大した場合、コードは以下のようになります。// rect x="0" y="0" width="10000" height="10000" fill="red"
変わったのは 10 が 10000 になった
見た目は1000倍になっても、文字数は数文字しか増えていないため、ファイル容量は数バイトしか変わらないというわけでした。
SVGはコードの文字で生成されているということで次は画像に設定されているメタデータ(位置情報やどこで作成されたのか)などの情報がどのようになっているのか気になってしまいましたが、それはまた別の記事で。
