SVGファイルの特徴と作成・変換する方法

SVGファイルは拡大や縮小に強いベクター形式の画像で、近年公式サイト等でも使用されるようになってきたファイル形式です。レスポンシブデザインと相性の良い便利なSVGファイルの魅力と、作成する方法、他の形式から変換する方法をこの記事ではご紹介します。

SVGとは？　ほか画像形式との違い

SVG画像とは？

SVGはScalable Vector Graphicsの略で、W3Cによって2001年9月に勧告された技術です。サポートされているブラウザやアプリケーションが少なかったことから、普及に伸び悩みました。しかし、最近は対応ブラウザ・アプリケーションが増え、2016年1月にSVG形式に対応していなかったIE8のサポートは終了したことから、ますますSVGが使いやすい状態となってきました。

拡大・縮小に強いベクター画像

SVGはGIF・JPEG・PNGとは異なり、ベクター画像のため、画像を拡大・縮小しても画質が劣化せずに綺麗に表示することができます。PC画面でも、スマートフォンで閲覧しても変わらず表示させることができるので、レスポンシブデザインととても相性の良い形式です。

画像なのにテキスト？XMLで記述されたSVG

SVGは画像ファイルではありますが、テキストエディタで中身を見ることができます。試しに、SVG画像のファイルの中身をテキストエディタで開いてみると、下記のようになっています。

複雑な画像だと大変ですが、シンプルなものだとテキスト形式のため、テキストエディタで作成・編集も可能です。ちなみに、GIF・JPEG・PNGの画像ファイルをテキストエディタで開くと文字化けをします。

SVGファイルを作成する方法

ベクター画像を作成できる、Illustratorでの作成方法をご紹介します。まずは、IllustratorでSVGにしたいベクター形式の画像ファイルを開きます。

上部メニューのファイルから、別名で保存を選択します。

任意のファイル名を付け、形式はSVGを選択します。

SVGオプションが表示されるので、OKをクリックするとSVGファイルが作成できます。

ほか画像形式から変換する方法

GIF・JPEG・PNG形式からSVGに変換するには、いくつか方法があります。一つは、Illustratorで画像トレース機能を使用してから、SVG形式で保存します。二つ目は、WebサイトのOnline Image Vectorizerを使用して変換します。二つ目はアップロードできる画像が１MBという制限がありますが、簡単にできるため今回はこちらの方法をご紹介します。

まず、Online Image Vectorizerにアクセスします。

Upload Imageボタンをクリックし、画像のアップロードを行います。

アップロードした時点で変換がはじまり、完了すると下記のページに移ります。

スクロールすると、画像に使用している色が一覧で表示されます。色数を調整したい場合は、Colorから色の数を選択したり、Colorsのチェックを外すとその色が使用されない状態のプレビューを見ることができます。

OutputのPreviewをクリックすると、変換後の画像を拡大してみることができます。

変換後の画像の調整や確認が終わったら、Downloadボタンを押すと画像をダウンロードすることができます。

これで、PNG画像をSVG形式に変換することができました。