Webサイトやアプリで画像を扱うとき、「SVG」という形式があるのを知っていますか?

私も最近までほとんどその存在を知らなかったのですが、ここ最近の技術と思いきや、じつは規格としては2001年から登場しているようです。10年以上も経ってる!

なぜ私がここで注目しているのかというと、近年の流行であるレスポンシブ対応やスマホアプリで便利なのが「SVG」らしいのです!

今回はざっくりとSVGについて調べたことを書いていこうと思います。

目次
SVGとは?
SVGを実際に使ってみる

SVGとは?

SVGは「ベクター形式」

img141104_1

普段、Webサイト用に画像を保存するときはGIF、JPEG、PNGなどを使いますよね。これらはピクセルによって描かれた画像「ビットマップ形式(別名:ラスタ形式)」と呼ばれるものです。

それに対して「SVG」は、シェイプ、パスなどを使用した「ベクター形式」によって描画する方法です。

ベクター形式だと何がいいの?

img141104_2

ベクター形式で描くSVGを使うといいのは、拡大縮小しても形が綺麗に描かれることです。

iPhoneやRetinaディスプレイなど高解像度の画面でみたとき、画像がボヤッとしているのをみたことありませんか?あのような画像の劣化が防げるんですね。

今あなたが読んでいるテキストはまさにそうです。どのPCやスマホでみても、劣化は起きませんよね。
テキスト関連でいうと、PCやスマホの中に入っているフォントに左右されないWebフォントも海外サイトではよく見かけます。

あと、SVGはファイルサイズが小さいのもよく利点としてあげられます。

ベクター?ベクトル?

SVGは、Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略称です。

「ベクター」という言葉でピンと来る方もいるかもしれません。デザイナーさんならAdobe Illustratorのベクター形式が思い浮かぶと思います。

でも、AdobeのSVGに関するヘルプには「ベクトル」と表記されていたんです。

あれ、ベクトルとベクターって違う意味なの?と思って調べてみたら、
・ベクトル(Vector)ドイツ語
・ベクター(Vector)英語

と、語源は同じらしいです。

うーん、ややこしや〜。統一して欲しいですね。
ベクタなのか、ベクターなのかの議論も出てきそうですが、とりあえずこの記事ではベクターと呼ぶことにします。

参考記事

SVGを実際に使ってみる

実際にSVGファイルを使う際はこちらの記事(Retina対応にSVGは本当に使えるのか? – Rriver)がとても参考になります。

私のこの記事では、今回はimgタグにSVGファイルを入れてWebサイトに表示させるのをやってみたいと思います。

1、IllustratorでSVGファイルを作る

今回使用するソフトはIllustrator CCです。

1-1、パスで描く

まず、パスで好きなものを描きます。
私はちゃっちゃっとネコさんのシルエット素材をお借りしました。

img141104_3

2-1、SVG形式で保存する

描いたら、SVG形式で保存します。

上のメニューバーのファイル→保存(または⌘+S)をしましょう。

img141104_4

別名で保存ウィンドウが出るので、ファイル形式のプルダウンを押して「SVG(svg)」を選択します。

img141104_5

保存を押すと、次にSVGオプションが開くので各項目を設定してOKを押します。

img141104_6

すると、あっという間に◯◯.svgというSVGファイルが出来ました!

2、imgタグでWebサイトに表示する

先ほどのSVGファイルをHTMLに置いてみようと思います。
今回は試しなので、すごーく簡単にHTMLを書いてみました。

<html>
<head>
<title>demo</title>
</head>
<body>

<img src="img_cat.svg">

</body>
</html>

これをブラウザで表示してみます。

img141104_8

こんな感じに縮小しても、比率を保ったまま綺麗に表示されました!

img141104_9

おお、意外にも簡単に出来てびっくり!

ちなみにこのネコさん、PNGで書きだすと7KBあるのに対し、SVGは2KBしかありませんでした。

img141104_10

SVGを使うときはいろいろ注意点があるようですが、

レスポンシブ対応やアプリ制作の時には
ぜひ導入を検討してみてはいかがでしょうか?

参考記事

鈴木:iPhone6と6plusの登場で、ますますレスポンシブな対応に必要性を感じてきました。そのうち近い将来、PhotoshopからIllustratorに移行するんじゃないか、なんて思っています。またはPhotoshopとIllustratorの境目がなくなるかも…?

Pocket

※ この記事は2年以上前に書いたものです。すでに情報が古くなっている可能性もありますのでご留意ください。