jpgやpng、gifといったラスター(bitmap)画像を拡大したり、保存し直したりすると画質がどんどん劣化します。それに対して、テキストベースのベクター画像であるSVGは、拡大縮小、再保存しても劣化することはありません。これはweb上でも同様です。

関連ページ マメ知識:ラスター画像とベクター画像

実際にラスター画像とベクター画像を、元サイズ(300px)よりも小さい200pxから始めて、1200pxまで拡大して、その違いを確認してみました。

二つずつ画像をセットにして各サイズに拡大しています。上側の緑色のものがSVG画像で、内部的にシェイプを横300px(拡大縮小に無関係ですが)のサイズで保存しています。下側の青色のものは、同じパスで色を変えて作成した横300pxのPNG画像です。

PNG画像のほうは、500pxあたりから、ボカシを加えたようになり、900pxあたりでジャギーが目立つようになります。それに対してSVG画像はまったく劣化していないことが判ります。

width 200px

width 300px

width 400px

width 500px

width 600px

width 700px

width 800px

width 900px

width 1000px

width 1100px

width 1200px

戻るボタン