WEB用語辞典-SVG（Scalable Vector Graphics）

WEB用語辞典-SVG（Scalable Vector Graphics）

SVG（Scalable Vector Graphics：スケーラブル・ベクター・グラフィックス）とは、画像を点（ピクセル）の集まりではなく、線や図形、数式によって表現するベクター形式の画像ファイルです。拡大・縮小しても画質が劣化しないことが最大の特徴で、ロゴやアイコン、イラスト、グラフなど、輪郭がはっきりした画像によく利用されています。現在では主要なWEBブラウザが標準対応しており、WEBサイト制作における代表的な画像形式の一つとなっています。

一般的なJPEGやPNGは「ラスター画像」と呼ばれ、画像を細かなピクセルで構成しています。そのため、大きく拡大すると画像がぼやけたり、輪郭がギザギザになったりすることがあります。一方、SVGは図形の情報を数式で管理しているため、どれだけ拡大・縮小しても画質が変わりません。パソコンやスマートフォン、高解像度ディスプレイなど、さまざまな画面サイズでも鮮明に表示できることが大きなメリットです。

SVGはXML形式で記述されているため、画像でありながらテキストデータとして保存されています。そのため、HTMLやCSS、JavaScriptと組み合わせて色やサイズを変更したり、アニメーションを付けたりすることも可能です。例えば、マウスカーソルを合わせた際にアイコンの色を変えたり、ボタンのアイコンを回転させたり、線が描かれていくようなアニメーションを実装したりと、動きのある表現にも活用されています。

また、SVGはシンプルな図形で構成される画像であればファイルサイズを小さくできるため、WEBサイトの表示速度向上にも役立ちます。企業のロゴやファビコン、SNSアイコン、地図、グラフなどでは、PNGよりも軽量になることも多く、レスポンシブデザインとの相性も優れています。一方で、写真のように色数や細かな情報が多い画像には適しておらず、そのような用途ではJPEGやWebPなどの画像形式が一般的に利用されます。

近年では、ファビコンや企業ロゴ、UIアイコンなどにSVGを採用するWEBサイトが増えています。高解像度ディスプレイでも美しく表示できることに加え、CSSで色を変更したり、JavaScriptで動きを加えたりできるため、デザインの自由度も高くなります。

このようにSVGは、高画質・軽量・拡張性を兼ね備えた現代的な画像形式です。特にロゴやアイコン、イラストなどの表示に優れており、レスポンシブデザインや表示速度の改善にも貢献します。そのため、現在のWEBサイト制作では欠かせない画像形式の一つとして広く利用されています。