この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
SVGとは
SVGとはScalable Vector Graphicsの略称で画像フォーマットの一種です。「拡張性があるベクタ画像」という意味であり、ベクタ形式で記述されたのグラフィックデータです。
ベクタ画像の特徴を簡単に説明すると、「拡大しても画質が劣化しない画像」です。JPGやPNGがラスタ画像と呼ばれるピクセル上のビットマップデータの集まりであるのに対して、ベクタ画像は、色や線を座標と数値で表現しているため拡大しても画質が劣化しません。
SVGはWEBデザインとの相性が良いため、近年では対応ブラウザの増加とともにWEB上で広く使われるようになってきました。
本記事ではSVGの特徴やメリット・デメリットを紹介していきます。
SVGの特徴
SVGの特徴はXMLで記述されたベクタ画像であることです。詳しく見ていきます。
SVGはベクタ画像
ベクタ画像はグラフィックを座標と数式を用いたアルゴリズムで表現しています。簡単に言うと、「線の色と形」だけをデータとして保存しています。これによりベクタ画像を拡大・縮小・加工しても画質が劣化しません。画質を維持したままサイズを大きく変更できるため、WEB上では企業ロゴなど、美しく表示させたい画像に使われることが多いです。
SVGはXMLで記述されている
SVGは画像形式の一種ですがXMLで記述されているテキストデータのため、後から色、サイズ、画像上にある文字の変更がテキストエディタで簡単にできます。HTML上にSVGのXMLデータを直接書き込むこともできます。
JPGやPNGなど他の画像形式との違い
JPGやPNGなどのラスタ画像はビットマップ形式と呼ばれる表示方法です。ビットマップ形式では画像を色がついたドットの集まりで表現しています。画像をドットの「座標と色」をデータとして保存しているため、拡大すると画質が悪くなってしまいます。画質を上げるには解像度を上げてドットの数を増やす必要がありますが、その分ファイルサイズが肥大してしまいます。
一方、ベクタ画像であるSVGは拡大しても画質が悪くなりません。ベクタ画像では線の色と形を数値として保存しており、画像を動的に描画しているためです。
SVGのメリット
拡大・縮小しても画質が劣化しない
SVGはベクタ画像なので、JPGやPNGといったラスタ画像と異なり、拡大・縮小を行っても解像度が維持されます。WEB上では、ロゴなどのきれいに表示させたい画像によく使われています。また画像の大きさを流動的に変えられるため、レスポンシブデザインとの相性も良いです。さらにベクタデータには解像度の概念がないのでAppleのRetinaディスプレイなどの精細なディスプレイでもきれいに表示できます。
ファイルサイズが小さい
SVGファイルは基本的にはラスタ画像よりもファイルサイズが小さくなります。ラスタ画像は解像度に比例してファイルサイズが大きくなるためです。
画像上の文字がテキストデータとして扱われる
SVGファイルでは画像上の文字を画像ではなくテキストデータとして扱うため、コンピュータが文字としてスキャンできます。ブラウザ上では文字としてカーソルで選択できますし、検索エンジンやスクリーンリーダーが画像上の文字をテキストデータとして認識できるようになります。
SVGのデメリット
写真には向いていない
SVGは写真には向いていません。写真のような色が多く、細かな表現をSVGで表そうとすると、ファイルサイズが大きくなりすぎます。これはベクタ画像の計算式が複雑になりすぎるためです。SVGが得意なジャンルは、イラストやロゴのような、「直線・曲線」と「塗り」で構成されている画像です。写真など色のグラデーションが多い画像をWEB上で扱う場合はJPGなどのラスタ画像にするのが一般的です。
非対応ブラウザがある
ほとんどのブラウザではSVG形式をサポートしていますが、一部の古いブラウザはSVGをサポートしておらず、表示ができない、または読み込みが遅くなるなどの影響があります。
まとめ
SVGは画像を拡大しても画質が落ちないのが大きな特徴です。WEB上ではロゴやアイコンに使われることが多いです。ただし写真などの精細な画像は不得意です。
画像形式にはJPG、PNG、SVG、GIFなど様々な種類があり、用途に応じて使い分けることで、負担をかけずに画像を最適な状態で表示できます。
