SVG-概要

SVGとは何ですか？

SVG、Scalable Vector Graphicsは、ベクターベースのグラフィックスを定義するためのXMLベースの言語です。
SVGは、Web上に画像を表示することを目的としています。
SVG画像はベクター画像であるため、ズームアウトやサイズ変更を行っても品質が低下することはありません。
SVG画像はインタラクティブ性とアニメーションをサポートしています。
SVGはW3C標準です。
ラスター画像のような他の画像形式もSVG画像と組み合わせることができます。
SVGは、HTMLのXSLTおよびDOMとうまく統合されます。

利点

任意のテキストエディタを使用して、SVG画像を作成および編集します。
XMLベースであるため、SVG画像は検索、インデックス作成が可能で、スクリプト化および圧縮できます。
SVG画像は、ズームアウトやサイズ変更に関係なく品質が低下しないため、拡張性が高くなっています。
あらゆる解像度で優れた印刷品質
SVGはオープンスタンダードです

短所

テキスト形式のサイズは、バイナリ形式のラスター画像に比べて大きくなります。
小さい画像でもサイズが大きくなることがあります。

例

次のXMLスニペットを使用して、Webブラウザーで円を描くことができます。

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

SVGXMLをHTMLページに直接埋め込みます。

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

出力

ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorerでは、SVG画像を表示するにはActiveXコントロールが必要です。

SVGとHTMLの統合方法

<svg>要素はSVG画像の開始を示します。
<svg>要素のwidth属性とheight属性は、SVG画像の高さと幅を定義します。
上記の例では、<circle>要素を使用して円を描画しました。
cxおよびcy属性は、円の中心を表します。デフォルト値は（0,0）です。r属性は円の半径を表します。
その他の属性ストロークとストローク幅は、円の輪郭を制御します。
fill属性は、円の塗りつぶしの色を定義します。
</ svg>タグを閉じると、SVG画像の終わりを示します。