SVGファイルの特徴とは？メリット・デメリットや初心者でも理解できる使い方を解説
画像ファイルの拡張子といえば、JPEGやPNGが有名で、最近ではサイズを限りなく圧縮したWebPという拡張子も利用されています。
そんな画像ファイルの拡張子の1つとして「SVG」が挙げられます。
SVGってなんですか？
SVGは、Webデザイナーの間では一般的な画像ファイルです！
SVGは、画質を落とすことなく拡大や縮小などの編集が可能で、ロゴ作成やグラフィックデザインに適しています。
この記事では、SVGについて初心者向けの情報をご紹介します！
この記事のレベル
| 重要度 | (4) |
| 初心者度 | (5) |
| 難易度 | (3) |
この記事で学べること
- SVGファイルは画質を落とすことなく拡大・縮小ができる
- ロゴやグラフィックデザインに最適
- Webデザイナーに人気がある画像拡張子
- 目次
SVGとは？ラスタ形式とベクタ形式
SVG（Scalable Vector Graphics）とは画像の拡張子の1つで、JPEGやPNGとは異なる「ベクタ形式」のデータです。
JPEGやPNG、GIFなどの拡張子は「ラスタ形式」のデータです。
JPEGやPNGは画像形式で保存されるため、画像としての役割しかありません。しかし、SVGはXMLコードで構成されることから、画像編集ソフトだけではなく、テキストエディタでのコーディングも可能です。
ベクタ形式、ラスタ形式って初めて聞きました。
それぞれの違いは以下です！
- ラスタ形式 ＝ ピクセルによって構成されている画像
- ベクタ形式 ＝ 画像のデータ（色や曲線など）を数値化して作成された画像
難しいですね…！
これだけだとわかりにくいので、それぞれの画像をもとに紹介します！
まず、ラスタ形式の画像ではピクセルを使用して表現しています。
こちらはパソコンのフリーイラストです。
イラストの左端を拡大すると、ピクセルで成り立っていることがわかります。
一方で、SVGのベクタ形式は以下のように表示されます。
こちらは、ピクセルで構成されておらず、形や色を数値データにして表示したものです。拡大縮小をしたところで、ラスタ形式のように画質が荒くなることはありません。
こちらは、PNGとSVGのそれぞれの画像で、無理やり縮小させた場合の比較です。
PNGでは、縮小後の画像を拡大してみると、画像が荒くなっていることがわかります。
一方、SVGの場合は、画質を保ったまま縮小できています。
イラストやロゴを作成する際に、「パソコン・スマートフォン・タブレット」のそれぞれのデバイスに最適化したいなら、ラスタ形式のPNGよりも、ベクタ形式のSVGのほうが拡大・縮小に適しているためおすすめです。
SVGファイルの特徴
SVGファイルには、以下の特徴があります。
- 画像を切り抜くと透過できる
- 画像にボタンやアニメーションを組み込める
- 画像サイズを変更しても画質が落ちない
それぞれ詳しく見ていきましょう！
FEATURE 1
画像を切り抜くと透過できる
SVGファイルは、Adobe IllustratorやAdobe Photoshopなど、画像編集ソフトでの編集が可能です。
不必要な部分を削除したり切り取ったりすると、その部分が透過処理されます。正方形や長方形以外の形でも問題なく切り抜けるため、さまざまなシーンで活用できます。
PNG形式でも、同じように背景を透過して保存可能です。しかし、画質が荒くなることを考えると、ロゴやグラフィックデザインの場合はSVGのほうが適しているといえるでしょう。
FEATURE 2
画像にボタンやアニメーションを組み込める
PNGやJPEGは画像としての役割しかなく、テキストやボタンなどを埋め込んだところで、1枚の画像にしかなりません。
しかし、SVGはXMLコードで構成されているため、CSS・JavaScript・動画作成ソフトなどを使うことで、ボタンやテキスト、アニメーションの表示も可能です。
上記は、実際に作成したSVGファイルの例です。
※表示されている画像はPNG形式です。
元画像は、以下のとおり。
こちらの画像を縮小して、テキストを画像内に埋め込みました。
「これはSEOのテキストロゴです」という部分が、テキスト表示になっています。
そのため、テキストをドラックすると、サイトでページをドラックしたときと同様の表示になります。
また、「リンクボタン」として設置している場所に、特定のサイトにアクセスできるリンクを挿入すると、ボタンとしても機能する仕組みです。
また、コーディング次第ではアニメーションの作成もできます。
- 特定の文字を拡大して表示する
- カーソルを合わせると画像の一部が表示される
- クリックと同時にアイコンを変化させる
といった表現が可能です。
画像にアニメーションを組み込むことによってUIの改善にもつながるため、サイトの構築にお困りの際は、ぜひ試してみてください！
FEATURE 3
画像サイズを変更しても画質が落ちない
SVGは、拡大や縮小をしても画質が劣化しません。
PNGやJPEGは、繰り返し編集して保存したり、拡大・縮小したりすると、画質が荒くなってしまいます。
また、画像を拡大するとサイズが大きくなるため、サイト内に画像を埋め込むと、読み込みに時間がかかることもあります。
一方SVGファイルの場合は、拡大・縮小をしても画質は落ちませんし、シンプルなデザインの場合は、PNGやJPEGよりも若干容量が軽くなります。
左がPNGファイル・右がSVGファイルの容量です。
PNGの場合10KB程度ありますが、SVGの場合は半分の5KB程度ですね！
テキストやボタンを挿入したりすると容量が増えるものの、PNGやJPEGに比べると容量は軽いです。
高画質なデジタル写真などの表示には適していませんが、ロゴや簡単なグラフィックデザインの場合は、PNGやJPEGよりもSVGのほうが適しているといえます。
SVGとほかの画像拡張子との違い
SVGは、PNGやJPEGと比べると、いくつか違いがあります。
形式の違い以外にも異なる点が多いため、表でまとめてみました！
| SVG | PNG | JPEG | |
|---|---|---|---|
| 形式 | ベクタ形式 | ラスタ形式 | ラスタ形式 |
| 修正後の劣化 | なし | あり | あり |
| 圧縮率 | 低い | 低い | 高い(解像度は落ちる) |
| サイズ | やや大きい | 小さい | 大きい |
明確な違いは、編集をしても画質が劣化しない点です。
サイズに関しては、同じ画像でサイズを比較したので以下を参考にしてください。
JPEGとPNGはそこまで大差はなく、保存する画像にもよります。
上記は圧縮前ですが、圧縮するとJPEGのほうがサイズは軽くなります。
サイズに関しては、SVGがもっとも大きい結果に。
シンプルなデザインだったり、縮小した画像だったりすると容量は軽くなりますが、すべて同サイズの場合はやや重くなります。
SVGはコードによって構成されているため、不要なコードを削除すれば軽くなります。クラウド上でサイズの圧縮ができるサイトがあるため、使用する前に圧縮するのもおすすめです。
SVGファイルを使用するメリット
SVGファイルのメリットとして、以下2点が挙げられます。
- 汎用性がある
- テキストデータとして認識できる
それぞれを詳しく見ていきましょう。
MERIT 1
汎用性がある
SVGファイルは、PNGやJPEGに比べると汎用性が高いです。
サイトに画像を設定する場合、ラスタ形式の画像だと拡大・縮小をすると画質が落ちてしまいます。
スマートフォンでは画質がいいのに、パソコンで画像が拡大表示されると、画質が荒くなることはよくあります。その場合、デバイスごとに画像を設定しなければなりません。
しかし、SVGファイルだと拡大や縮小をしても画質が劣化しないため、各デバイスに合わせて表示サイズを調整するだけで対応できます。
サイト内の画像を最適化することによってUIの向上にもつながりますし、使用する画像の枚数も減るため、読み込みも早くなります。
MERIT 2
テキストデータとして認識できる
SVGは画像ファイルですが、XMLコードで記述されているため、テキストデータとして認識されます。
SVGファイルに対応している画像編集ソフトでも編集できますが、テキストエディタでのコーディングも可能です。
また、イラストやロゴを作成し、SVGファイルとして保存できるソフトもあります。
SVG形式で保存し、テキストエディタでテキストやリンクを追加することで、Googleなどの検索エンジンがSVGファイルのキーワードを読み込めるようになるため、SEOにも役立ちます。
修正する手間はかかりますが、PNGやJPEGではできないことですので、メリットといえるでしょう。
補足：SEOにはどう影響する？
SVGファイルは、XMLコードによって構成されているため、画像内にテキストを入れ込むことによって、SEOに影響すると考える人も多いです。
しかし、同様の機能としてALT属性があります。
ALT属性は、画像が表示されない代わりにテキストで表示する設定で、SEOに影響する可能性があるとされています。
結論から言うと、SVGファイルにテキストを入れ込んだところで、上位表示できるわけではありません。
やや複雑な話になりますが、SVGファイルをGoogleに認識させるためには、imgタグとして読み込ませなければなりません。
ただ、テキスト部分に対策キーワードを入力したところで、大幅に順位が変わるわけではないため、現状はALT属性のみ設定していればいいという見解です。
SVGファイルを使用するデメリットは？
SVGファイルのデメリットとして、以下が挙げられます。
- イラストや高画質画像の編集には向いていない
- 使用できないブラウザもある
それぞれ、メリットと合わせて把握しておきましょう。
DEMERIT 1
イラストや高画質画像の編集には向いていない
SVGファイルは、ロゴやグラフィックデザインなど、単色の編集・修正に向いています。しかし、高画質な写真やイラストに関しては、逆に画質が悪くなってしまいます。
こちらは、フリー画像をPNGとSVGで並べた結果です。
サイズに関しては、PNGが1.19MBでSVGが3.74MBでした。
軽く見ただけでは、違いはほとんどわかりません。
拡大して見てみましょう！
拡大すると、SVGの画質が荒くなっていることがわかります。
SVGの形式だと、高解像度の写真やイラストを表現するのは難しいのです。
そのため、SVGファイルは単色のロゴやグラフィックなどの編集で使うことをおすすめします。
DEMERIT 2
使用できないブラウザもある
SVGは、基本的にどのブラウザでも利用できます。しかし、以下一部のブラウザでは利用できないため、注意が必要です。
- Internet Explorer8以下
- Safari3.11以下
- Android2.3以下
いずれも現在は使用されていないブラウザであり、最新バージョンにアップデートされていれば問題なく使用できます。
PNGファイルをSVGに変換する方法
PNGやJPEGで作成したファイルをSVG変換する場合は、オンラインでの変換がおすすめです。
Adobeの公式サイトでは、クラウド上でPNGからSVGに変換できます。
会員登録をする必要がありますが、料金は一切かかりません。
「画像をアップロード」というボタンを押すと、アップロードできる画面が表示されます。画像をアップロードすると、自動的にPNGがSVGへと変換処理されます。
変換された画像は、SVGファイルにて保存が可能です。
ダウンロードボタンを押して、保存を完了させましょう。
また、ダウンロードしたSVGファイルは、以下のような方法で編集が可能です。
- テキストエディタにて編集する
- 専用ソフトにて編集する
軽い編集であれば、クラウド上で利用できるVectrがおすすめです。
画像引用：Vectr
こちらのサイトでは、テキストの追加やボタンの追加など、SVGの軽い編集ができます。
まとめ
SVGファイルは、Webデザイナーからの人気が高い拡張子です。
画像の拡大・縮小で画質が落ちなかったり、画像にテキストやアニメーションを追加できたりする点が特徴です。
高画質な画像には使えない、サイズが大きいといったデメリットはありますが、用途に合わせて他の拡張子と使い分ければ、便利に活用できます。
シーンに合わせて適切な拡張子を選べるように、ぜひこの記事でSVGファイルの特徴について覚えてみてください！
