SVGファイルとは？特徴・作成・変換方法を知ろう！

Webデザイナーの方は聞き慣れた「SVGファイル」ですが、特徴や作成方法などご存知でしょうか？SVGファイルを使用する理由やメリットなどをしっかり理解しましょう。

SVGファイルとは？

SVGファイルとは、英語でScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略称であり、2001年9月にW3Cによって勧告された技術です。当初は、サポートされているブラウザやアプリが少なく、なかなか普及もしていませんでしたが、近年では使いやすい状況になってきたこともあり、サイト制作では欠かせない技術となりました。

PNGやJPEG、GIFなどとどう違うの？

画像といえば「ラスタ形式」のPNG、JPEG（JPG）、GIFなどがおなじみですが、SVGは「ベクトル形式」で画像を描画しています。

「ラスタ形式」ではピクセルを縦横に並べ、色や輝度などをそれぞれの点に情報として与える方法で画像を描画しており、拡大縮小することによって画質が劣化したりギザギザになってしまいます。編集には不向きな上に、ファイルサイズが大きくなってしまうというデメリットがあります。

一方「ベクトル形式」で描画されるSVGファイルは、パスやテキスト、シェイプなどの集合を画像として扱うため、拡大や縮小をしても画質が劣化しません。近年主流となっているレスポンシブデザインと相性がよく、PCで見てもSPで見ても変わらない画質で表示させることができます。

同じ「ベクトル形式」のファイルにはPDFファイルもあります。印刷物などでよく使用するファイルですね。

PNGとJPEGの違いについて詳しく解説している記事もあります。興味のある方はぜひご覧ください。

【関連記事：PNGとJPEGの違いとは？あなたの画像に最適な保存形式を！】

画像なのにテキストで記述されるSVG

画像ファイルであるSVGですが、XMLに準拠しているためテキストエディタで開くことができます。また、シンプルなものだとテキスト形式なので、テキストエディタで作成したり編集したりすることもできます。

PNGやJPEG、GIFといった画像ファイルはテキストエディタで開くと文字化けしてしまいます。

SVGファイルのメリット

SVGファイルと他画像ファイルの違いなどが理解できるとSVGファイルのメリットがわかっていただけるかと思います。

レスポンシブ対応、Retina対応が1つのファイルでできる

今まではスマホやRetina用に2倍サイズで作成した画像や、色違い・hover用などといくつも画像を準備していましたが、svgファイルだと1つのファイルで対応することができます。画像が減るので結果的にはHTTPリクエスト数の削減にもなります。

サイズや色の調整が後から簡単にできる

svgファイルはcssでサイズや色を変更することができるので、わざわざphotoshopで開いて画像を編集しなくても変更が可能です。

アニメーションも対応

今までgifアニメーションをphotoshopやFlashで作っていましたが、svgファイルだとcssやjavascriptで動きをつけることもできます。

SVGファイルはどうやって作るの？

SVGファイルはベクター画像を作成できるIllustratorやphotoshopで作成することができます。SVGにしたいベクター形式の画像ファイルを開き、拡張子をsvgを指定して保存しなおせば作成できるので、とっても簡単ですね。

また、Illustratorやphotoshopでの作成方法が簡単ではありますが、「メモ帳」などテキストエディタを使用してSVGファイルを作成することもできます。

SVGファイルに変換するには？

SVGファイルを作成したいけど、元データがJPEGやPNGしかない！という場合も、簡単にSVGファイルに変換する方法があります。

Illustratorで変換

Illustratorの画像トレース機能を使用することで、ラスター画像をベクター画像に変換することができます。ソフトを使い慣れている方はトレース機能を使った変換が一番手軽ではないでしょうか。

オンラインツール「Image Vectorizer」

オンラインツール「Online Image Vectorizer」を使うと、手軽に画像変換ができます。もちろん無料で使うことが可能です。

フォーマットやサイズに制限はありますが、変換したい画像をアップロードするだけでSVGファイルへ変換されたものがダウンロードすることができます。

SVGファイルの使い方

SVGファイルを作成したらWEB上に表示させてみましょう。表示方法は通常のJPEGやPNGなどの画像ファイルと同じように<img>タグを使用して表示することができます。

SVGファイルをアニメーションさせたい時などは、直接HTMLコードに埋め込んで表示することもできますが、コードが複雑になってしまうので、アニメーションが不要であれば無難に<img>タグを使用するのがいいでしょう。

SVGを活用しよう　

SVGファイルは拡大や縮小しても画像が荒れることがなく、後からサイズや色の編集もしやすいため、Webサイトのロゴやアイコンなどで画像を表示する場合非常に便利なフォーマットです。

ぜひ活用してみてください。

こちらの記事では、Illustrator（イラストレーター）を使ったSVGファイルの作成方法について紹介しています。興味のある方はぜひご覧ください。

【関連記事：イラストレーターを使ってSVGを作成しよう！】