Svg-overview
提供：Dev Guides
SVG-概要
SVGとは何ですか？
- SVG、スケーラブルベクターグラフィックスは、ベクターベースのグラフィックスを定義する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>SVG XMLをHTMLページに直接埋め込みます。
テストVG
<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ウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorerでは、SVG画像を表示するにはactiveXコントロールが必要です。
SVGとHTMLの統合方法
- <svg>要素は、SVG画像の開始を示します。
- <svg>要素のwidth属性とheight属性は、SVG画像の高さと幅を定義します。
- 上記の例では、<circle>要素を使用して円を描きました。
- cxおよびcy属性は、円の中心を表します。 デフォルト値は（0,0）です。 r属性は円の半径を表します。
- その他の属性strokeおよびstroke-widthは、円の輪郭を制御します。
- fill属性は、円の塗りつぶし色を定義します。
- 終了タグ</svg>は、SVG画像の終わりを示します。
