- Coding Methodology
- 第107回 SVGファイルの基礎を理解して、上手に活用しよう。
第107回 SVGファイルの基礎を理解して、上手に活用しよう。
SVG（Scalable Vector Graphics スケーラブル・ベクター・グラフィックス）とは、計算式によって色や曲線を表現する、XML ベースの画像形式の一つです。
HTML 上にコードとして記述できる為、class 名などを指定して、CSSでスタイルを変更できたり、JavaScript を用いて動的に中身のコードを書き換えたりする事が可能です。
そのような理由から、近年、SVGがWeb 制作の現場で使用される機会が増えてきています。今回は実装例を挙げ、ビットマップ形式とSVG のメリットとデメリットを確認しつつ、SVG の使いどころをご紹介します。
汎用的な矢印アイコンを実装する
図①下の様な矢印アイコンを色違いで１０種類用意
今回は図①の様な矢印アイコンを１０種類の色違いでコーディングするときを例に挙げ、ビットマップ形式（pngやjpeg）とSVGで用意した場合、それぞれどうなるかみてみましょう。
ビットマップ形式(png, jpeg) で実装した場合
画像を10種類PSDファイルなどから各形式で切り出し、それぞれに画像名を付けて保存。
<img>タグを使用し、HTMLファイルで各画像を指定します。
メリット
- ・画像を切り出して用意するだけで良い。
- ・CSSやHTMLタグにスタイルを指定してサイズを変更できる。
デメリット
- ・色違いなどのバリエーションを用意する場合、その数だけ画像が必要となるので、色の種類が増える度に画像を用意する必要がある。
- ・画像の解像度を考慮する場合、高解像度用など、同じ画像を複数枚用意しなければならない事がある。
SVGで実装した場合
コード①
コード②CSSでスタイルを指定
コード①をHTML上に記載します。この場合はコードで画像のパスを表現しているので、画像ファイルを個別に準備する必要はありません。
メリット
- ・CSSなどでサイズを変更しても、ベクター形式なので画像の劣化がほぼない。
- ・コード②のように、CSSでスタイルを指定して、アウトラインを上書きできる為、（コード①の赤枠の部分）コードが１セットあれば使い回せる。
デメリット
- ・上記のような矢印を自作する場合、SVGの記述方法やルールなどを覚える必要がある。
SVGの使いどころ
図②イラストに近い画像
今回の様な簡単な矢印の場合は、CSSでも再現可能なので、わざわざSVGを使う必要もないですが、CSSのみで再現が難しい、イラストに近い図②などを表現する場合、SVGも選択肢の一つに入ってくるかと思います。
イラストに近い画像を用意する場合、コード上で自作するのは難しいので、ビットマップ形式をSVGに変換できるサービス（https://icomoon.io/）などを使用してSVGコードを取得するか、デザイナーにSVG形式の画像データを用意してもらうなど、準備が必要になります。
それぞれのメリット、デメリットなどを考慮して、SVGをサイト制作に活用してみてはいかかでしょうか。
