読者です 読者をやめる 読者になる 読者になる

vol.34 SVG形式の基本的な書き出し、注意点、軽量化、表示速度

f:id:BOEL:20151119144842j:plain

こんにちは。イラストレーターの西山です。
今回はSVGについて基本的な書き出し方や使う時の注意点をご紹介します。
SVG(スケーラブル・ベクター・グラフィックスの略)はIllustratorで作成したようなベクター画像を表示する画像フォーマットです。
はっきりと鮮明に表示できるので、最近の新しいPCやスマートフォンタブレットのタッチデバイスはRetinaディスプレイなど高解像度でWebサイトで見ることができます。 Webサイトで使う画像フォーマットはSVG以外にJPEG,GIF,PNGなどがあります。
しかし「拡大して画像が粗くなってしまった」「サイズが違うたびに再度書き出さないといけない」 といった経験をした人は多いのではないでしょうか。

f:id:BOEL:20151119144856j:plain
SVGベクターデータのため、画像をズームしても画質が粗くなることはありません。
そのためサイトをRetinaディスプレイに対応する場合も1枚の画像フォーマットできれいに対応できます。

ラスタ形式画像

ドット単位で色情報が構成されていて、それが集合して画になっているもの。
Webではjpg、pnggifが主流。

ベクターデータ

パスデータで構成されている画像。拡大・縮小するとき、サイズに合わせて画像を再描画する。そのため拡大しても劣化したりにじまない。
WebではSVG形式が主流となってきている。


SVGの作り方

f:id:BOEL:20151119144908j:plain

SVGは主にAdobe Illustratorから書き出します。 (PhotoshopからでもSVGは書き出せますが、ここではIllustratorからの書き出し方をご紹介していきます)

1 レイヤーにあるデータを全てアウトライン化

アウトライン化されていないと画像が粗くなる原因となります。

2 「ファイル」>「別名で保存」で画像を書き出す。

ファイル形式をSVG(.svg)に設定して保存します。

3 保存するとSVGオプションが表示されます。

基本はデフォルトのままで問題ありません。

f:id:BOEL:20151119144925j:plain

画像のレスポンシブ化

SVGオプションでは画像のレスポンシブ化という項目があります。
ブラウザの画面サイズによって画像を拡大・縮小するレスポンシブレイアウトを採用している場合はチェックを入れておきます。

画像のレスポンシブ化はSVGを書き出した後にも変更できます。
変更したい場合はテキストエディタを使って、赤枠のwidth,heightを削除することで対応できます。

f:id:BOEL:20151119144936j:plain


SVGデータの軽量化

Webサイトの表示速度が下がらないようにSVGのファイルサイズをできるだけ小さくしておきましょう。 小さくするためにはCompressor.ioなどの圧縮ソフトを使うほかに、レイヤーの整理をすることでかなり軽くすることができます。


・不要なパス、レイヤーを消しておく。
・レイヤーのグループ化を解除する。

 

SVGでも画質が粗くなる時がある

SVGでも粗くなる時があります。 そうならないためにはいくつかポイントがあります。

・画像サイズ(単位:pixel)に小数点をふくめずに書き出す。
・データはアウトラインをかけておく
SVGフォーマットにしたい画像は全てパス化する

SVGに書き出した後でも、Illustratorで開くと編集できます。
粗くなってしまう原因がわからない場合は、一度SVGデータを開いてファイルのプロパティを確認してみましょう。


Illustratorがなくてもできる無料変換ツール

Illustratorがなくても簡単にSVG変換できる便利なWebツールを紹介します。
単色対応なのでアイコンのSVG化に向いています。

Convertio
jpg、pnggifさまざまな形式からSVGに変換できます。
potrace.js
日本語サイトでわかりやすい。サイズ指定など細かい設定もできます。


おわりに

いかがでしたか?
Webサイトを閲覧できる環境が多くなり、ディスプレイ解像度がどんどん大きくなって、画像表示の方法で様々な議論がなされています。

拡大・縮小に柔軟な対応ができるSVGですが、これまでSVGフォーマットに対応できるブラウザが少なく、あまり利用されることはありませんでした。


最近ではFirefoxSafariGoogle ChromeInternet Explorer(ver.10,11)、Microsoft Edgeなどモダンブラウザで対応が進んでいます。
しかしInternet Explorer 8などのいわゆるレガシーブラウザや古いバージョンのAndroid OSのブラウザ、Webビューでは画像が適切に表示されない場合があるため 注意が必要です。
またグラデーションなどの色数が多いものや複雑な形などは、かえって画像データサイズが大きくなりSVGに向いていない場合もあるため、 どの画像をSVG化するか注意しながら作っていきましょう。