• コーディング ファクトリーHOME
  • Coding Methodology
  • 第107回 SVGファイルの基礎を理解して、上手に活用しよう。

コーディングメソドロジー

第107回 SVGファイルの基礎を理解して、上手に活用しよう。

SVG(Scalable Vector Graphics スケーラブル・ベクター・グラフィックス)とは、計算式によって色や曲線を表現する、XML ベースの画像形式の一つです。
HTML 上にコードとして記述できる為、class 名などを指定して、CSSでスタイルを変更できたり、JavaScript を用いて動的に中身のコードを書き換えたりする事が可能です。
そのような理由から、近年、SVGがWeb 制作の現場で使用される機会が増えてきています。今回は実装例を挙げ、ビットマップ形式とSVG のメリットとデメリットを確認しつつ、SVG の使いどころをご紹介します。

汎用的な矢印アイコンを実装する

図①下の様な矢印アイコンを色違いで10種類用意

図①下の様な矢印アイコンを色違いで10種類用意

今回は図①の様な矢印アイコンを10種類の色違いでコーディングするときを例に挙げ、ビットマップ形式(pngやjpeg)とSVGで用意した場合、それぞれどうなるかみてみましょう。

ビットマップ形式(png, jpeg) で実装した場合

画像を10種類PSDファイルなどから各形式で切り出し、それぞれに画像名を付けて保存。
<img>タグを使用し、HTMLファイルで各画像を指定します。

メリット
  • ・画像を切り出して用意するだけで良い。
  • ・CSSやHTMLタグにスタイルを指定してサイズを変更できる。
デメリット
  • ・色違いなどのバリエーションを用意する場合、その数だけ画像が必要となるので、色の種類が増える度に画像を用意する必要がある。
  • ・画像の解像度を考慮する場合、高解像度用など、同じ画像を複数枚用意しなければならない事がある。
SVGで実装した場合

コード①

コード①

コード②CSSでスタイルを指定

コード②CSSでスタイルを指定

コード①をHTML上に記載します。この場合はコードで画像のパスを表現しているので、画像ファイルを個別に準備する必要はありません。

メリット
  • ・CSSなどでサイズを変更しても、ベクター形式なので画像の劣化がほぼない。
  • コード②のように、CSSでスタイルを指定して、アウトラインを上書きできる為、(コード①の赤枠の部分)コードが1セットあれば使い回せる。
デメリット
  • ・上記のような矢印を自作する場合、SVGの記述方法やルールなどを覚える必要がある。

SVGの使いどころ

図②イラストに近い画像

図②イラストに近い画像

今回の様な簡単な矢印の場合は、CSSでも再現可能なので、わざわざSVGを使う必要もないですが、CSSのみで再現が難しい、イラストに近い図②などを表現する場合、SVGも選択肢の一つに入ってくるかと思います。
イラストに近い画像を用意する場合、コード上で自作するのは難しいので、ビットマップ形式をSVGに変換できるサービス(https://icomoon.io/)などを使用してSVGコードを取得するか、デザイナーにSVG形式の画像データを用意してもらうなど、準備が必要になります。

それぞれのメリット、デメリットなどを考慮して、SVGをサイト制作に活用してみてはいかかでしょうか。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム