コラム

こんにちは　ホネ吉です。今回はWEBサイトに使用するSVG画像についてお話しします。

SVGとは

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で画像ファイルの一種です。PNGやJPG等のドットの集合で構成されるビットマップデータと違い、
SVGはXMLをベースにしたベクターデータで構成されているため、拡大・縮小に強くRetina対応のディスプレイなどで閲覧した場合でもぼやけたりせず表示できます。

テキストエディタで編集可能

前述したとおりSVGはXMLをベースとしているためテキストエディタで開きファイルを編集することが可能です。そのため簡単な変更やクラス名をSVGデータ自体に付与することもできます。

CSSやJavaScriptでアニメーション可能

JPGやPNGなどのビットマップデータと違いSVGはCSSで色の変更が可能で、文字や図形を描くといったベクターデータならではのアニメーションもできるのでデザインの幅が広がります。

SVGデータ作成の注意点

1.書き出し時には不要なレイヤーは削除する

SVGデータを書き出す際にはデータ容量を軽くするため不要なレイヤーは削除しましょう。非表示になっているレイヤーなどが残っていると書き出し後のファイルに非表示の状態で残り、データ容量が大きくなってしまします。

2.フォントはアウトライン化しておく

書き出すデータにフォントが含まれる場合、アウトライン化をしておかないとデバイスごとに異なるフォントで表示されます。正しい描画にするためにフォントだけでなくすべてのオブジェクトをアウトライン化しておきましょう

3.アートボードの座標(0,0)を起点に作成する

作成時に適当な位置で描画した場合、ブラウザで意図しない位置に表示されてしまいます。また、線の描画がはっきりしないことにもつながるので作成位置には注意しましょう。

まとめ

Retina対応ディスプレイが増えてきた中、PNGやJPGだと対応画像を用意するために複数枚用意しなければならないのに対し、SVGは1つのファイルで対応できるのでアイコンやロゴなどは今後SVGで作成していくことも検討してはいかがでしょうか。