SVGファイルとは？変換方法やメリット・デメリットを解説
更新日：2023年01月19日
Webサイトでの利用が目立つSVGファイル。
JPEGやPNGファイルと何が違うのでしょうか？本記事ではSVGファイルとはどのような特徴を持つのか、メリット・デメリットや変換方法をご紹介します。
＞＞成果を追求するクリエルのホームページ制作サービス資料はこちら
SVGファイルとは
初めにSVGファイル（拡張子は「.svg」）の特徴や他の形式との違いなど、SVGファイルとはどのようなものなのかを見てみましょう。
SVGファイルの特徴
SVGファイルの大きな特徴は画像を拡大表示しても解像度が低下しないこと。つまり、WebサイトにSVGファイルを使用するとユーザー環境に左右されずに元の解像度で表示ができるということです。
SVGはXMLで記述できるベクター画像と呼ばれる画像で、数値情報の集合体によって表現するため、画像サイズが変化しても劣化が起きません（もし画像の単位であるピクセルの集合体であればサイズ拡大時に画像が粗くなります）。
このためSVG（＝Scalable Vector Graphics）ファイルの名前に「スケーラブル＝拡大縮小可能」とあるのです。
SVGとJPEG・PNGの違い
ベクター画像のSVGに対して、JPEGやPNGはビットマップ画像と呼ばれる画像形式です。
ビットマップ画像はピクセルと呼ばれる点の集合体で表現し、高品質な写真でもきめ細かく表現ができます。しかし点の集合体のため画像を拡大すると粗くなってしまいます。
SVGとGIFの違い
JPEGやPNGでは表現できないアニメーションや透過に対応するGIF画像。256色での表現に制限されるものの容量も軽く、使用機会も多い画像の一つです。
しかし、従来GIF画像が使われてきた場面でも、現在はアニメーションや透過にも対応しているSVG画像が使われるようになってきました。
SVGへ変換する方法
メリットが多いSVG画像ですが、ゼロから作るのは専門知識がある担当者でなければ大変です。そんな時に活用したいのが変換ツール。
JPEGやPNGをSVGへ変換するツールを使用する方法です。
制作の現場ではインストール型のツールを使う機会が多いですが、下記のような無料のオンラインツールでも簡単にSVGへの変換が可能です。
Adobe Express
もしSVGファイルをゼロから作成した場合は「Inkscape」のようなフリーソフトを使う方法もあります。
SVG圧縮とは
SVGファイルは不要なデータを取り除くことで容量を軽くすることができます。このSVGファイルを軽くする作業をSVG圧縮（または最適化、軽量化）と呼びます。
SVG圧縮も無料のオンラインツールを使えば誰でも手軽にSVG圧縮ができるためオススメ。例えば以下のようなオンラインツールがあります。
Compressor.io
SVGファイルをWebサイトで使用するメリット
ここからはSVGファイルをWebサイトで使用するメリットをご紹介します。
拡大や縮小表示の際に解像度を一定に保てる
画像の拡張性に優れ、拡大縮小が可能なSVGファイルはレスポンシブサイトともマッチします。
ビットマップ画像なら場合によっては同じ画像でも複数のサイズを用意する必要がありますが、ベクター画像のSVGファイルであればそれも不要。SVGファイルを一つ用意するだけで、解像度を保ちつつ、ユーザー環境に合わせて表現が可能です。
Webサイトの閲覧はマルチデバイス利用が一般的になっている現在では大きなメリットと言えます。
CSSによるアニメーション表現ができる
GIFアニメーションを作り込むことなく、JavaScriptも使うことなく、CSSでのアニメーション表現ができる点もメリットです。
CSSで表現できるということはエンジニアによるプログラミングが不要で、CSSを記述できるコーダーだけで実装ができるのです。
SVGファイルをWebサイトで使用するデメリット
SVGファイルを使用するデメリットもあります。メリット・デメリットを抑えて適切なファイル形式を上手く使い分けましょう。
写真のような高画質画像は不向き
ベクター画像はビットマップ画像と比べると高画質な画像には不向きです。
画質を重視する写真画像のような表現はSVGファイルよりもJPEGやPNGなどが向いていると言えます。
未対応のブラウザがある
SVGファイルはブラウザによって未対応の場合があります。
とは言え日本国内でのシェアが1%ほどまで下がったIE以外の主要ブラウザは対応済みのため、IE利用ユーザーが多いサイトでない限り大きな影響は少ないと考えられます。
SVG basic support
WordPressへSVGファイルをアップできない場合
WordPressではアップロードできるファイル形式が指定されており、phpファイル内にアップロード可能なファイル形式一覧が記述されています。
しかし、標準ではSVGファイル形式が記述されておらず、SVGファイルのアップロードはできません。
制作技術者以外の方がphpファイルを直接編集する作業は危険なため、そのような場合は以下のようなプラグインで対処する方法が安全で簡単です。
SVG Support
SVGファイルはSEO上有利なのか？
Googleは画像認識の技術も年々向上させていますが、やはりテキスト情報の方がより正確に読み取れることに変わりはありません。SVGファイルはXMLによる記述で作られるデータのため、テキストファイルとしても開けるデータ。
このため、Googleに伝わりやすいテキスト情報がSEOでも有利になると考えられる側面もあるでしょう。
しかし、画像の内容はaltタグで明示できますし、UXの観点でSVGファイルであるか他の形式であるかは無関係。ユーザーにとって大きな違いがなければ、SEOで評価が上がるとは考えにくいとも考えられます。
SVGファイルを使う際はあくまでも画像の特性が活きるかどうかで判断するべきでしょう。
最適な画像ファイルの制作をはじめ、Web制作に関することはぜひ弊社へお気軽にご相談ください。こちらの「Webサイト制作サービス資料」もチェックしてみてくださいね。
