多くのホームページが活用している「SVG（エスブイジー）ファイル」。具体的にどの様なフォーマットなのかご存知でしょうか。

SVGファイルのメリットは、拡大縮小しやすく編集性・汎用性が高いこと。でも「何となく使っている」「実はあんまりどのようなものか知らない」「なぜSVGなの？」と感じている方も少なくないでしょう。

そこで本記事では、SVGの特徴やその他のフォーマットとの違い、作成方法などについて詳しく解説します。

目次

  1. SVGファイルとはなにか？
  2. SVGファイルとその他の画像形式との違い
  3. Adobe Illustratorを使用したSVGファイルの作成方法
  4. JPEG・PNGからSVGファイルに変換する方法
  5. SVGファイルをPNGに変換する方法

SVG（エスブイジー）ファイルとはなにか？

SVGファイルとはなにか？.png
「SVGファイル（スケーラブル・ベクター・グラフィックス、Scalable Vector Graphics）」はの歴史は意外にも古く、2001年頃に勧告された技術です。

SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、一種の画像フォーマットになります。

引用元：今こそ取り組むSVGとは｜株式会社オプティマイザー

JPEGやPNGと言ったようなwebでよく見かけられる画像との違いは、PEGやPNGがビットマップデータなのに対し、SVGはXMLをベースにした二次元ベクターデータであることです。

このベクターデータとは「画像を、点の座標とそれを結ぶ線（ベクター、ベクトル）などの数値データをもとにして演算によって再現する方式」であり、このデータ形式で作られた画像は「拡大・縮小しても画質が損なわれない」といった特徴を持っています。

なので、このベクターデータで作られた画像でwebを作ることができれば、スマホやタブレットや高解像度ＰＣと言ったRETINAディスプレイを採用している画像でもキレイな画質で表示することができるのです。

また、前述したとおりベクターデータという「数値データをもとにして演算された画像」なのでCSSやJavaScriptのアニメーションととても相性が良く、動きやぼかしなどのエフェクトを加える事も可能で、web上のアニメーション表現に幅広い選択肢をあたえてくれます。

（中略）

そんな便利な事だらけに見えるSVGですが、1998年に誕生、2001年9月にはW3Cの勧告をされた結構昔からある技術にも関わらずここ近年までその普及は進むことがありませんでした。

引用元：今こそ取り組むSVGとは｜株式会社オプティマイザー

当時はサポートしているブラウザがあまりなかったことなどが原因となり、普及しませんでしたが、近年は対応するブラウザが増えたことで多くのホームページが活用しています。
　　

SVG（エスブイジー）ファイルとその他の画像形式の違い

SVGファイルとその他の画像形式との違い.png

SVGファイルとその他の画像形式との違いをまとめると以下のとおりです。

・GIF、JPEG、PNGなどは「ラスタ形式」、SVGは「ベクトル形式」
・ベクトル形式は拡大縮小しても劣化に強いフォーマット
・写真のように複雑な画像には「ラスタ形式」、単純なロゴ画像には「ベクトル形式」が適している
・SVGファイルはテキストエディタで編集可能

ラスタ形式とベクトル形式の違い

画像フォーマットでおなじみのGIF、JPEG、PNGといった「ラスタ形式」の画像は、ピクセルを縦横に並べる方法で画像を描画します。ラスタ形式の画像は拡大縮小してしまうと画質が劣化してしまったり、画像がギザギザになるため編集には不向きです。加えて、ファイルサイズが大きくなってしまい負担になるというデメリットがあります。

一方*SVGファイルは、パス・テキスト・シェイプなどの集合を画像として扱う「ベクトル形式」*で画像を描画します。ちなみに、EPSなどのフォーマットもSVGファイルと同じベクトル形式です。

ベクトル形式は拡大縮小に強く画質が劣化しないため、 どのような画面上であっても鮮明かつ明瞭な画像を表示できるというメリットがあります。例えば、近年レスポンシブデザインが主流となっていますが、PCとスマートフォンで画像の見た目が変わってしまっては非常に残念です。しかし、SVGファイルを活用することにより、どちらの画面でも綺麗な画像をユーザーに見せることができます。

ファイルサイズも小さく、リソースに限りがある場合でも使いやすいフォーマットです。
　　

それぞれの形式に適した画像がある

ここまで聞くとラスタ形式よりもベクトル形式の方が優れている様に感じますが、実際にはベクトル形式にもデメリットがあります。ベクトル画像は複雑な計算式で画像を描画しているため、写真のように複雑で繊細な配色や輪郭の画像描画には適していません。

写真を編集するならラスタ形式、ロゴ・タイトルなどの作成にはベクトル形式が適していると言えるでしょう。

SVGファイルはテキストエディタで編集可能

また、SVGファイルはXMLに準拠しているという特徴も持っているため、テキストエディタで開きファイルを編集することが可能です 。

Adobe Illustratorを使用したSVG（エスブイジー）ファイルの作成方法

SVGファイルとその他フォーマットとの違いや、どのようなメリットがあるか、などおわかりいただけたのではないでしょうか。

ここからは、SVGファイルの作成方法を紹介します。今回は、Adobe Illustratorを使用したSVGファイルの作成方法を紹介しますので、ぜひ参考にしてみてください。
　　

画像を開く

SVGファイルの作成方法1.png
SVGファイルとして保存したい、ラスタ画像を開きましょう。
　　

保存メニューへ

SVGファイルの作成方法2.png
ファイル ＞ 別名で保存と進めます。
　　

SVGファイルとして保存する

SVGファイルの作成方法3.png
ファイル名を入力し、ファイルの種類「SVG」を選択して「保存」をクリックします。

SVGファイルの作成方法4.png
オプション画面を表示しますので「OK」をクリックしましょう。

SVGファイルの作成方法5.png
これで、SVGファイルが作成できました。
　　
Adobe Illustratorを使った作成方法が簡単ですが、「メモ帳」などのテキストエディタを使ってSVGファイルを作ることも可能です。Adobe Illustratorが用意できない場合などの作成方法の1つとして覚えておくと便利でしょう。

参考：
1分でわかるSVGファイルの作り方・使い方・表示方法とは | iwb.jp
　　

JPEG・PNGからSVGファイルに変換する方法

「SVGファイルが欲しいけれど、JPEGの画像しかない！」「どうやって変換できるの？」と困ったことはないでしょうか。

実は、簡単な方法でJPEG、PNGといった画像フォーマットをSVGファイルに変換できます。今回は、手軽に画像変換ができるオンラインサービス「Online Image Vectorizer」を使った方法をご紹介します。

Online Image Vectorizerにアクセスする

SVGファイルに変換する方法1.png
変換したい画像を準備し、下記URLより「Online Image Vectorizer」にアクセスしましょう。
　　

画像をアップロードする

SVGファイルに変換する方法2.png
青い「Upload Image」ボタンをクリックして、変換したい画像を「Online Image Vectorizer」にアップロードします。対応しているフォーマットはPNG、BMP、JPEGの3種類、画像サイズは最大1MBまでに対応しています。

※フォーマット、サイズに制限がありますので注意しましょう
　　

変換開始〜ダウンロード

SVGファイルに変換する方法3.png
アップロードすると画像の変換を開始します。

SVGファイルに変換する方法4.png
変換後は、一覧表示から色の調整が可能です。

SVGファイルに変換する方法5.png
調整やアウトプット画像の確認が終了したら、右手にある青い「Download」ボタンをクリックします。これで、SVGファイルへの変換が完了しました。
　　
ちなみに、同様の変換ができる無料ツールとして「Online Image Vectorizer」以外にも「Vector Magic」があります。Vector MagicはPNG、BMP、JPEGに加えて「Online Image Vectorizer」が未対応のGIFにも対応していますので、GIF画像をSVGに変換したい場合は活用するといいでしょう。

Vector Magicはこちら

SVGファイルをPNGに変換する

SVGファイルをPNGに変換する無料ツールもあります。「SVGtoPNG」を使って変換してみましょう。

SVGtoPNGにアクセスする

svg - 1.jpeg
SVGtoPNG

まずは「SVGtoPNG」にアクセスします。

画像をSVGファイルをアップロードする

svg - 2.jpeg

「アップロード」ボタンをクリックして、PNGに変換したいSVGファイルを選択します。

画像を変換してダウンロードする

svg - 3.jpeg

SVGファイルがPNGに変換されます。「ダウンロード」をクリックしてPNGファイルをダウンロードしましょう。
　　

SVG（エスブイジー）ファイルのメリット・デメリットを理解しよう

SVGファイルは拡大縮小しても画像が荒れず、後から編集がしやすいため、ホームページでロゴ画像を表示する場合などに大変便利なフォーマットです。

しかし、写真には不向きだったりとデメリットな点もあります。デザイン前に事前に特徴を知っておき、闇雲に”なんでもSVGファイル”と決めつけるのではなく用途に応じて選択したいものです。

画像フォーマットにはよく耳にする、JPEG、PNG以外にGIF、TIFF、BMP……と様々な種類があり、それぞれ特徴が異なります。画像フォーマットを正しく選択することで、あらゆる画面上で画像を綺麗にはっきりと表示でき、表示する際に負担をかけずに済みます。デザイン作業に少しでも関わる場合には、SVGファイルの特徴や、その他のフォーマットとの違いを理解しておくべきです。

SVGファイルの作成、変換は簡単にできますので、ぜひ作成・変換時は本記事の手順を参考にしてみてください。
　　

画像編集についてもっと知る

「SVG」と呼ばれる画像フォーマットをご存知でしょうか。一般的にSVGはベクターデータを扱っているフォーマットとして認識されていますが、なぜベクターデータを扱うのにこれだけ注目されているのでしょうか。今回は、SVGを使いこなすために最低限知っておきたいSVGの概要を紹介します。