SVGとは

2015年10月13日

SVGとはScalable Vector Graphicsの頭文字をとったもので、
ベクトルベースのグラフィックを描画するためのマークアップ言語です。
マークアップ言語といえばHTML/XMLを思い浮かべますが、SVGはXMLの
一種なのでXMLの書式が使えます。

SVGには図形に対応した要素が用意されていて、描画に必要な座標値などを
属性で指定し、SVHはHTMLと同じようにスタイルシートで使えます。
CSSを使いD3.jsで生成されるグラフのスタイルを色々と変更できます。

D3.jsで表示されているグラフはSVGによって生成されています。
D3.js自体にはグラフィックスを描画する機能はなく、HTML上に
配置されたSVG要素を操作することで様々なことを表現しています。

SVGではベクトルベースでグラフィックを作成します。
ベクトルベースというのは座標点を組み合わせて書く方法です。
対照的なものはピクセルベースがあります。
PhotoShopはグラフィックを点(ピクセル)の組合せとして扱う物を示します。

ベクトルベースの場合、少ないデータで図形を描画でき、解像度が変わったり
図形を拡大しても線が綺麗に表示されます。これらがメリットです。

デメリットは、複雑な図形だと座標点が多くなり図形を表示するのに
時間がかかります。

実際にSVGを使い図形を表示します。
以下のサンプルコードを実行すると・・・

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>SVGで円と四角を書く</title>

	<style>
	svg{
		width:320px;
		height:240px;
		border:2px solid green;
	}
	rect{
		stroke-width:4px;
		stroke:yellow;
		fill:skyblue;
	}
	circle{
		opacity:0.7;
		fill:yellow;
	}
	</style>
	<script src="../js/d3.js"></script>
</head>
<body>

	<h1>SVGを使い図形を書いてみる</h1>
	<svg>
		<!--
			SVG図形を描画臼る場合、<svg></svg>で囲まれた範囲に
			図形の要素名を指定します。今回は四角と円を描画しています。
			四角はrect要素、円はcircle要素です。描画に必要な
			属性を指定することで図形を表示できます。

			要素は<rect --- />又は</rect>で閉じないと図形の描画が
			うまくいきません。

			SVG座標系はコンピューターの座標系と同じで左上が原点です。
			右下にいくほど座標値は大きくなります。
		-->
		<rect x="50" y="20" width="80" height="100" />
		<circle cx="150" cy="120" r="90" />
	</svg>

	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>SVGで円と四角を書く</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid green;

}

rect{

stroke-width:4px;

stroke:yellow;

fill:skyblue;

}

circle{

opacity:0.7;

fill:yellow;

}

</style>

</head>

<body>

<h1>SVGを使い図形を書いてみる</h1>

<svg>

<!--

SVG図形を描画臼る場合、<svg></svg>で囲まれた範囲に

図形の要素名を指定します。今回は四角と円を描画しています。

四角はrect要素、円はcircle要素です。描画に必要な

属性を指定することで図形を表示できます。

要素は<rect --- />又は</rect>で閉じないと図形の描画が

うまくいきません。

SVG座標系はコンピューターの座標系と同じで左上が原点です。

右下にいくほど座標値は大きくなります。

-->

</svg>

</body>

</html>