SVGとは？使う前に知っておきたいことまとめ

目黒

2015.04.09

デザイナーの目黒です。
気づけばプライベートで使うデバイス全てがRetinaでした。

Retinaは綺麗で見やすくて使いやすいですね。ど近眼＋乱視持ちの私は非常に助かっています。
高解像度ディスプレイが当たり前の存在となり、スクリーンサイズの多様化が進むなかで、SVG画像やウェブフォントを活用するサイトがかなり増えたように感じます。

「SVGってよく耳にはするけど実際はどうなんだろう？」と思われる方の為に、今一度SVG画像についておさらいしようと思います。

目次
SVGとは？
SVG画像の作り方
- Photoshopでの書き出し方法
- Illustratorでの書き出し方法
  - ポイント
SVGの表示方法
まとめ

SVGとは？

SVG（Scalable Vector Graphics）とはW3Cにより開発された、XMLという言語で記述されているベクターイメージです。

ベクターなので画面の拡大・縮小をしても描写の劣化が起きないため、マルチデバイス対応として注目されています。

■実寸表示（100％）の場合
jpgとsvg比較（実寸表示）

■200％表示の場合
jpgとsvg比較（200％表示）

写真等色数が多く図形にすると複雑になってしまうものはSVGに不向きなので、jpgやpngとの使い分けが必要です。

フィルター効果を使って色やぼかしなどで見た目を変えたり、CSS3やjQueryと組み合わせてアニメーション表示も可能です。 SVG単体でアニメーションできたり…。多芸多才です。

IE8以下はSVG未対応なためフォールバック画像を用意する等対策が必要となります。

また、スクリーンリーダーの対応が追いついていないので、アクセシビリティのために一手間加える必要があります。

SVG画像の作り方

Adobe Illustrator CCやPhotoshop CCでの書き出しが可能です。

Photoshopでの書き出し方法

テキストツールを使ったテキストがある場合には、シェイプに変換しておきましょう。そのままだと意図した通りに変換されない場合があります。
Photoshopでテキストをシェイプに変換

書き出し準備ができたら、メニューの「ファイル」、「書き出し」、「書き出し形式」と進みます。
Photoshopの書き出し形式

あとは、形式をSVGにセットし、すべてを書き出しとすればOKです。
PhotoshopでSVGの書き出し

Illustratorでの書き出し方法

今度はIllustrator CCでSVGを作成してみたいと思います。

まずは、オブジェクトを作成します。
Illustratorでオブジェクトを作る

一部のフォントは埋め込みができなかったりシステムフォントに置き換えられてしまうこともあるので、アウトライン化するのがオススメです。
オブジェクト内の文字はアウトライン化

SVG画像の大きさはアートボードのサイズになってしまうため、アートボードのサイズ調整をする必要があります。（意図的に余白をとりたい時は必要ないです。）
Illustratorの「オブジェクト→アートボード→選択オブジェクトに合わせる」でぴたっとあわせられます。
アートボードをオブジェクトサイズに

IllustratorもPhotoshop同様に書き出し形式を選択します。
Illustratorの書き出し形式

ファイルの種類をSVGに変更します。
IllusratorでSVGに書き出し

書き出しオプションは下記を参考に書き出しします。これで完了です。
IllustratorのSVG書き出しオプション

ポイント

IllustratorでSVG画像を作成するとデータ容量が肥大傾向にあるようで、それを回避するための設定やツールが下記のブログに詳しく書かれています。

SVGの表示方法

SVGの表示方法は5種類。
①HTMLに直接SVGコードを直接埋め込む（インラインSVG）
②SVGスプライト（SVGスプライトの作り方は弊社うさこ氏の記事をご参照ください）
③アイコンフォントを作成して読み込む
④img要素として読み込む
⑤object要素として読み込む各々注意すべき点はありますし長くなるので割愛しますが、表示するだけなら「⑤要素として読み込む」が一番楽でシンプルかなと思います。
④のicomoon等を使ったアイコンフォント自作も楽しいし扱いも楽ではありますが、アイコン化したオブジェクトそのものを修正する場合、一からフォントファイルを作り直さなければならないので少々手間になってしまいます。

また、アクセシビリティの問題も発生してしまいます。