画像や写真の保存に使われている「.png」や「.jpg」といった拡張子に馴染みがある人は多いのではないでしょうか。
では、「.svg」という拡張子をご存じですか？
SVGも画像を保存する形式の1つですが、JPEGやPNGとは全く異なる表現方法で画像データを表します。
今回は、そんな「SVG」についてご紹介いたします。
1. SVGとは
SVGは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略で、「大きさを変えられるベクター画像」のことです。
画像を保存するときの形式の1つで、画像の保存形式は他に「JPEG、JPG」や「PNG」*などもあります。
画像には、ベクター画像とラスター画像があります。
ベクター画像はパスやシェイプと呼ばれる「曲線を描いたり一定の範囲を塗りつぶしたりといった処理を座標と数式に置き換えて表現」されるのに対し、ラスター画像は「ピクセルが集まり表現」されます。
「SVG」や「PDF」はベクター画像、「JPEG、JPG」や「PNG」はラスター画像にあたります。
*JPEGとPNGについては、こちらの「JPEGとPNGどっちがいいの？」をご覧ください。
2. SVGの特徴
SVGの特徴は、Scalable（スケーラブル）と名前につく通り、「大きさを変えられること」です。
ベクター画像は、ブラウザが座標や数式を読み取りその場で描画を行うため、どんなサイズであっても美しく表示することができます。
ラスター画像では、同じ画像でも複数の異なるサイズで使用する際には、複数画像を用意する必要がありますが、ベクター画像であるSVGは1ファイルのみで対応することができます。
HTTPのリクエスト数を減らすのはもちろん、ファイルサイズも小さくなる*ため、Webサイト表示速度が向上します。
また、SVGは色のデータも座標や数式で表現されているため、表示サイズや色をCSSで変更することができるのも便利な点です。
SVGが力を発揮するのは、ロゴやアイコンのようなシンプルな形状のオブジェクトや「線」と「塗り」で表現されたイラストレーションなどです。
*写真などの多数の色調が複雑に表現された画像をSVGにすると、データ量が膨大になってしまう場合があります。
3. JPEGやPNGとの違い
JPEGやPNG、GIFなどのラスター画像は拡大するとギザギザに見えてしまい、画質が悪い印象を与えてしまいまう可能性があります。
また、編集や保存を繰り返し行うと、画質が下がってしまう問題や、ファイルサイズが大きくなりすぎてしまう問題があります。
一方SVGファイルでは拡大・縮小といった編集をしても、画像が劣化することはありません。
綺麗に見せたいロゴや、レスポンシブデザインに使いたい画像などにSVGファイルを活用することが多いです。
4. SVGで可能なWeb表現
SVGの最大の特徴は、ベクター画像のため、画像を編集しても画質が劣化しないことです。
SVGを活用することができるWeb表現をいくつか紹介します。
フィルター効果を活かした表現
ロゴやボタンなどの画像にCSSで影を付けるとします。
透過処理されたPNG画像にCSSで影をつけても、そのままでは画像全体の領域に対して影がついてしまいます。
しかし、SVGにフィルターをかければ、そのSVGの任意の（ロゴであればロゴに沿った）形状にドロップシャドウを適用することが可能です。
フィルター効果を活かした表現
SVGには、アニメーションも組み込むことが可能です。
SVGをJavaScriptで動かす方法や、アニメーション制作ソフトからSVGを書き出しWebページに置く方法があります。
曲線を活かしたUI表現
SVGでは、縦・横の罫線だけでなく斜めの線や自由な曲線も表現することが可能です。
これをWebページに用いれば、様々な形状のボタンなどを作成することができます。
さいごに
馴染みのある「PNG」や「JPEG」はラスター画像、「SVG」はベクター画像です。
ベクター画像であるSVGは、色や形などのデータが座標や数式で表現されています。
そのため、拡大や縮小を行ったとしてもギザギザに見えるなど画質が落ちることはありません。
また、CSSで形や色を変えることも可能なので、扱いやすいです。
写真などの多数の色調が複雑に表現された画像をSVGにすると、データ量が膨大になってしまう場合があり注意が必要なSVGですが、JavaScript等とも相性がいいので、ページに動きを付けたい場合などに活用してみてはいかがでしょうか。
今回お伝えしたのは、「SVG」についてですが、ラスター画像である「JPEG」や「PNG」についてはこちらの「JPEGとPNGどっちがいいの？」をご覧ください。
