libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

SVGによるベクターグラフィック(1) (6/6)

作成:2011-04-25 08:02
更新:2011-04-27 08:35

■インラインSVGを使おう！

ここまで、SVGファイルに記述するやり方でサンプルを掲載してきましたが、このやり方は今後は主流ではなくなるでしょう。HTML5からは、HTMLのタグとして埋め込む「インラインSVG」が一般的になってくると予想されるからです。

このインラインSVGは、これまでやってきた通常のSVGの記述と実はそれほど大きな違いはありません。SVGファイルの<svg>タグの部分をコピーし、そのままHTMLの中にペーストすればいいのです。

下のリスト欄に、簡単な例を挙げておきました。これは、先のサンプルをインラインSVGでHTML内に埋め込んだものです。非常に簡単にHTML内に図形を直接表示させることができます。

インラインSVGは、<svg>タグやその他のグラフィックタグで図形を描くという意味ではそれまでのSVGと同じですが、実はその意味するものは違います。SVGファイルに記述されたのは、あくまでSVGのタグですが、インラインSVGのそれは「HTMLのタグとして扱われる」のです。

例えば、この例では<svg>タグに「style="position:absolute"」という形でスタイルを設定することで、他のテキストと重ねあわせて図形を表示させています。これは、SVGファイルを使ってはできないことです。<svg>タグは、あくまでHTMLのタグであり、HTMLのstyle属性やスタイルシートの設定が利用できます。

HTMLであるということは、当然、JavaScriptからそれぞれのグラフィックタグをDOMオブジェクトとして取得し操作できるということでもあります。――一応、ここでは「JavaSciptによるHTML5プログラミング入門」と銘打って書いてるわけですが、今回は主なタグの説明だけでかなりな分量になってしまいました。JavaScriptからの利用については、また次の機会に、ということで……。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
	xml:lang="ja">

	<head>
		<meta http-equiv="content-type" 
			content="text/html;charset=utf-8" />
		<title>サンプルページ</title>
	</head>
	
<body>
	<h1>SVGの埋め込み</h1>
	<svg width="300px" height="300px" 
		style="position:absolute"
		xmlns="http://www.w3.org/2000/svg">
	<g fill="red" stroke="blue" 
		stroke-width="2px">
		<rect x="150px" y="20px" width="150px" 
			height="75px"  opacity="0.5" />
		<rect x="150px" y="20px" width="150px" 
			height="75px"  opacity="0.5"
			transform="translate(20,10) scale(0.9) 
			rotate(20,0,0)" />
		<rect x="150px" y="20px" width="150px" 
			height="75px"  opacity="0.5"
			transform="translate(40,20) scale(0.8) 
			rotate(40,0,0)" />
		<rect x="150px" y="20px" width="150px" 
			height="75px"  opacity="0.5"
			transform="translate(60,30) scale(0.7) 
			rotate(60,0,0)" />
		<rect x="150px" y="20px" width="150px" 
			height="75px"  opacity="0.5"
			transform="translate(80,40) scale(0.6) 
			rotate(80,0,0)" />
	</g>
	</svg>
	<h2>これは、SVGをインラインで埋め込んだものです。</h2>
	<h3>&lt;svg&gt;タグはHTMLの要素として用意されて
		おり、一般のHTMLタグと同じ感覚で記述できます。</h3>
	<h4>style="position:absolute"を指定することで、
		グラフィックとその他のHTML要素を重ねて表示させる
		ことも自由に行えるようになります。</h4>
</body>

</html>
※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る