図の作成にSVGを利用するメリット

SVG形式で図を作成するメリットおよびサンプルコードを紹介します。
 

SVGの概要

SVGとは、「Scalable Vector Graphics」の略称で、画像フォーマットの一種です。
計算式で画像を表現する形式というのが特徴です。
 

SVGを利用するメリット

  • テキストエディタで開くことができる 画像編集アプリケーションを使用しなくても書き換えできます。
 
  • ソースコードとして管理可能 Gitで管理すれば過去の変更履歴を追うことができます。
 
  • 拡大・縮小してもぼやけない JPGやPNGとは異なり、いくら拡大・縮小してもぼやけません。
 
  • JavaScriptやCSSを適用できる アニメーションを含めたり、色違い画像を容易に作れます。
 

SVGのサンプルコード

画像のサンプルコードと生成される画像を紹介します。
サーバの画像をタグでマークアップすることで、データを再利用することができます。
タグでインポートするように利用できます。
タグ内のソースを変更すると、その変更が全ての呼び出し先で一気に反映できます。