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画像のファイルの中身をテキストエディタで開いてみると、下記のようになっています。

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 73">
 <defs>
  <style>.cls-1{fill:#fff;stroke:#000;stroke-miterlimit:10;}</style>
 </defs>
 <title>circle</title>
 <circle class="cls-1" cx="36.5" cy="36.5" r="36"/>
</svg>

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

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

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

2016-07-28_13h44_55

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

2016-07-28_13h38_06

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

2016-07-28_13h38_47

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

2016-07-28_13h39_08

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

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

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

2016-07-28_14h17_59


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

2016-07-28_17h48_40

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

2016-07-28_17h51_30

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

2016-07-28_17h55_07

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

2016-07-28_17h59_04

2016-07-28_17h59_15

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

2016-07-28_18h01_23

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


イベント

2017/12/05(火)
Design Thinking Square