私たちが日々目にするWeb上に存在する画像は、すべてビットマップ形式とベクター形式の画像のどちらかに分類されます。写真を含む、イラストや図形などもすべてこのどちらかに分類されます。さらにビットマップ形式の中には、大きく分けてJPEG、PNG、GIFのファイル形式が存在し、それぞれ一長一短の特徴があります。

ブラウザが表示できる画像ファイルには大きく分けてJPEG,PNG,GIFの3種類の拡張子があります。WEB関連の業界人でも明確な使い分けができていない方々もいらっしゃいます。いかに画像を綺麗に見せ、容量を軽くするかが肝心なので、本項ではそれぞれの拡張子のメリット、デメリットや、画像の内容に応じてどの...
上記の記事を参考に用途によって使い分けることがポイントです。ではベクター形式には何があるのか。Webサイトで使用できる画像の形式の中では「SVGファイル」と呼ばれるものが唯一のベクター形式になります。JPEG、PNG、GIFに比べて聞き慣れない方も少なくないかと思いますので、今回は基本的な仕組みから主な使い道をご説明いたします。
WordPressではデフォルトではSVG形式に対応していないので、アップロードするとエラーが発生します。「SVG Support」
こちらのプラグインを有効化することで、問題なくSVGのファイルをアップロードできます。
ビットマップ形式とは
画像を色のついた点の集合体で表現する形式で細やかな色の表現に向いています。(写真や絵画など)しかし、点の集合体がゆえに拡大すると画像が粗くなってしまいます。JPEG、PNG、GIFなどすべてのビットマップ形式の画像は拡大すると画像が粗くなりますよね。
ベクター形式とは
点と線の情報を数値化した画像形式で、コンピューターが計算をして描画している画像です。画像の拡大や縮小を繰り返しても数式が変化しその都度コンピューターが計算し、描画しなおすので画質が変化しないのが特徴です。一方で、複雑な写真などを表現するには膨大な計算を必要とし向いておらず、線や図形、シンプルなロゴなどに適しています。
SVGとは
冒頭でも述べた通りベクター形式の中で、唯一Web上で活用できるのがSVGというファイル形式であり、「Scalable Vector Graphics」の略称です。その名の通り「計測できる画像」ですので、数式を計算して描画している画像形式です。その特徴からSVGファイルは、画像ファイルでありながらSVG(HTMLに似た言語)で記述され、テキストエディターにて編集することも可能です。
SVGでできること
スマホやRetinaディスプレイ用に画像ファイルを複数用意する必要がない
下記の記事で記述しているとおり、Retinaディスプレイに対応する為には同じ画像であれば、各サイズの画像を数枚用意する必要がありました。

さまざまなテクノロジーが発展する昨今、スマホやモバイル端末でも、とても美しい画質で画像や映像を見られるようになりました。しかし、iPhoneやMacなどで採用されているRetina(レティーナ)ディスプレイで画像がぼやけていたり、鮮明に表示されないことがあります。なぜ高画質な液晶で評判のRetina...
しかし、SVGファイルであれば、解像度による画質の変化がないので一つのファイルですべて対応できます。これによりデータの総容量が軽減され、ページをスムーズに表示できることも良い点です。
CSSで画像を編集できる
画像ファイルでありながら数式やテキストで記述されたデータですので、SVGファイルにクラス名を指定することもできます。つまり専門の画像編集ソフトを起動しなくてもCSS上でサイズや色を変更できるということです。通常の画像ファイルですと一から画像を作り直す必要がありますが、SVGファイルであれば、あとからでも簡単に修正可能です。
JavaScriptを用いたアニメーションにも対応している
アニメーションといえばGIFですが、SVGファイルに直接コードを記述して滑らかな動きのあるアニメーションをつけることもできます。ただし、HTML、CSS、JavaScriptの理解が必要です。
※SVGのアニメーションはIEなどの一部のブラウザで対応しないので注意が必要です。
SVG アニメーション対応ブラウザについて
まとめ
SVGファイルの主な使い道としてはロゴやアイコンなどのシンプルな画像になります。複雑な写真やイラストの場合、表示速度が遅くなり、データ容量も大きくなるので注意が必要です。ロゴやアイコンに限っては高解像度のディスプレイ(Retinaディスプレイ等)にも対応できるので、その他の画像ファイルの形式に比べて優れているといえるでしょう。
シンプルでいて、かつどのブラウザでも美しく見せるべきロゴやアイコンなどは、SVGを。それ以外の複雑な写真やイラストなどは、用途に応じてビットマップ形式の画像ファイル形式を活用しましょう。
【2021年4月9日追記】
透過やアニメーションなどにも対応できて、対応ブラウザも増えてきたWebPという画像フォーマットについては、下記記事でご覧いただけます。