PNGとSVG

サイト内、画像軽量化計画の一環として一部の画像にSVG形式の採用を考えています。

PNGはラスタ形式の画像で、ネットではよく使われていて、
画質が全く劣化しない。
透明・半透明の画像も扱える。
などの利点がありますが、一般にファイルサイズが大きくなってしまいます。
JPGはファイルサイズを小さくすることが可能ですが、画質が劣化します。

SVGファイルは、これらの画像と違い、外形線をとって色で塗りつぶすベクター形式のデータです。
拡大縮小しても劣化しません。

このSVGファイルの中を見るとどことどこを何色でとcssで色を塗りわけています。
htmlと同じですね。。

上の大きさではあまり違いは判りませんが、試しに拡大してみると、、
PNG画像:

SVG画像:

明らかに違いますね(゜o゜)
おまけにSVGは外形線の情報のみなので軽くて、拡大縮小も関係なくきれいなラインを描いてくれます。
少しづつ少しづつ(^^)/

スポンサーリンク
スポンサーリンク