TIPS

11.13.2015
vol.34

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

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

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


画像をズームしても画像が粗くならない

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

・ラスタ形式画像
ドット単位で色情報が構成されていて、それが集合して画になっているもの。
Webではjpg、png、gifが主流。

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


SVGの作り方

SVGの作り方

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

1 レイヤーにあるデータを全てアウトライン化
アウトライン化されていないと画像が粗くなる原因となります。

2 「ファイル」>「別名で保存」で画像を書き出す。
ファイル形式をSVG(.svg)に設定して保存します。

3 保存するとSVGオプションが表示されます。
基本はデフォルトのままで問題ありません。


画像のレスポンシブ化

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


画像のレスポンシブ化

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


SVGデータの軽量化

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

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


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

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

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

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


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

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

Convertio
jpg、png、gifさまざまな形式からSVGに変換できます。

potrace.js
日本語サイトでわかりやすい。サイズ指定など細かい設定もできます。


おわりに

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

拡大・縮小に柔軟な対応ができるSVGですが、これまでSVGフォーマットに対応できる
ブラウザが少なく、あまり利用されることはありませんでした。
最近ではFirefox、Safari、Google Chrome、Internet Explorer(ver.10,11)、Microsoft Edge
などモダンブラウザで対応が進んでいます。

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

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2015
December(2)
November(2)
October(1)
August(2)
July(3)
April(1)
March(7)
February(3)
January(8)

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。