PCで取り扱う画像のフォーマットには、GIF画像、JPEG画像、PNG画像などといった様々な形式があります。
それぞれのフォーマットには特徴があり、GIFはアニメーションの表現などに適しています。
JPGは写真を表示するのに最適です。
また、圧縮しても画像劣化しないPNGはWeb業界の中でも人気となっています。
そして数あるフォーマットの中でも、ここ数年で最も注目を集めている「SVG」というフォーマットはご存知でしょうか？
今回はこの「SVG」の魅力について解説いたします。もくじ
◆SVGファイルとは
SVGファイルとは、Adobe Illustratorなどで取り扱われる、拡大・縮小が可能なベクター画像のことで「Scalable Vector Graphics」の略になります。
Web上で一般的に使われているビットマップ形式の画像（JPEGやPNGなど）とは違って、拡大・縮小しても画質が劣化しない点が大きな特徴です。
◆SVGのメリット
・レスポンシブデザインと相性が良い
SVGはベクター画像のため、画像を拡大・縮小しても画質が劣化しません。
そのため、PC画面・スマートフォンどちらで閲覧しても変わらず綺麗に表示させることができ、レスポンシブデザインと相性の良い形式といえます。
・CSSでサイズや色を変更できる
SVGは画像ファイルですが、XMLというコードを用いたデータファイルとなっており、テキストエディタで開いて中身を見ることができ、編集も可能です。
さらに、色やサイズの変更を後から行いたい時にはCSS上でサイズや色を変更することができます。
◆SVGファイルを作成するには
・Adobe Illustratorなどの画像編集ソフトを使用する
一番簡単でおすすめなのが、IllustratorやPhotoshopなどのソフトを使ってSVG画像を作成する方法です。
注意点は、テキストデータや様々なオブジェクトが混在している場合には、必ず全てをアウトライン化してください。
一色のオブジェクトにしておくと、後からCSSで色の変更などが行いやすくなります。
画像は「別名で保存」から「SVG形式」で書き出します。
・オンラインエディタを利用する
IllustratorやPhotoshopのような画像編集ソフトをお持ちでない場合には「Vecteezy」や「ZorroSVG」といったオンラインエディタを利用することもできます。
「Vecteezy」はIllustratorでベクターを扱うのと同様にSVGを扱うことができ、「ZorroSVG」は、透過のPNGやGIFファイルをアップロードするだけで、自動でそれよりも軽い透過SVGファイルを作成してくれます。
・ホームページからSVG画像をダウンロードする
すでに作成されたSVG画像を「Simple Icons」や「IcoMoon」のようなホームページからダウンロードすることもできます。
一色のオブジェクトになっているので、後からテキストエディタで好みの色に着色することができ、とても便利です。
◆まとめ
大量の画像データを読み込むことはページの読み込み速度の低下に繋がります。
ですがSVGを使えば読み込み速度低下の解消にも一役買ってくれるでしょう。
また、多様化しているマルチデバイスへの対応の解決策にもなるでしょう。
SVGの特色を理解した上で、適切な場面でぜひ積極的にSVGを活用してみてください。