【APIの基礎知識】SVG

SVGとは

• Webで利用できるベクター形式の画像データであり、実態はXMLに基づいたマークアップ言語である
• SVGの画像は計算式によって表現されるため、画像を拡大しても画像の劣化が発生しにくいという特徴をもっている　※描画する画像ごとにDOMが追加されるため、複雑な画像の表示によっては処理速度が低下する。
• SVGで描画された図形はDOMツリーを構成するため、一度描画した図形をJavaScriptから操作可能である

表示される画像イメージ

<svg>タグを利用する場合

svg要素を利用することで、HTMLファイルにSVGのソースコードを記述することができる

imgタグを利用する場合

svg形式のファールデータがあるときに活用する

CSSを利用する場合

background-imageプロパティを使い、背景画像としてsvg形式の画像データを読み込む