図の作成にSVGを利用するメリット
SVG形式で図を作成するメリットおよびサンプルコードを紹介します。
SVGの概要
SVGとは、「Scalable Vector Graphics」の略称で、画像フォーマットの一種です。
計算式で画像を表現する形式というのが特徴です。
SVGを利用するメリット
- テキストエディタで開くことができる 画像編集アプリケーションを使用しなくても書き換えできます。
- ソースコードとして管理可能 Gitで管理すれば過去の変更履歴を追うことができます。
- 拡大・縮小してもぼやけない JPGやPNGとは異なり、いくら拡大・縮小してもぼやけません。
- JavaScriptやCSSを適用できる アニメーションを含めたり、色違い画像を容易に作れます。
SVGのサンプルコード
画像のサンプルコードと生成される画像を紹介します。
サーバの画像をタグでマークアップすることで、データを再利用することができます。
タグでインポートするように利用できます。
タグ内のソースを変更すると、その変更が全ての呼び出し先で一気に反映できます。
