吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】svg要素

2015年2月20日 / category : svg

今回は、svg要素の概要について、まとめたいと思います。
svg要素とはSVG要素を入れるコンテナ要素です。(SVG要素とは、rect要素やcircle要素のことです。)
まず、SVG要素がSVG名前空間に属すると認識させるために、XML名前空間宣言をする必要があります。

HTML
<svg xmlns="http://www.w3.org/2000/svg"></svg>

xmlns属性に、”http://www.w3.org/2000/svg”を代入します。
このことで、svg要素内の要素はすべてSVGとなります。これは必ず記述する必要があります。

SVG言語のバージョンを指定するversion属性があります。現在は、SVG1.1なので、次のように記述します。

HTML
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>

svg要素内でリンクを使用する場合も、XML名前空間宣言が必要です。
リンクの場合は、xmlns:xlink属性となります。例えば、次のような場合は、必要となります。

HTML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<rect width="300" height="300" fill="#e5000d" id="myRect" />
</defs>
<use xlink:href="#myRect" />
</svg>

幅と高さを指定する属性としておなじみのwidth属性、height属性があります。

HTML
<svg
	width="300"
	height="300"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	version="1.1">
</svg>

座標を指定するx属性とy属性があります。これは最も外側にあるsvg要素に指定しても効果はありません。
svg要素が入れ子になっている場合で、試してみます。

HTML
<svg
	width="300"
	height="300"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	version="1.1">
	<svg width="150" height="150" x="150" y="150">
		<rect width="150" height="150" fill="#e5000d" />
	</svg>
	<svg width="150" height="150">
		<rect width="150" height="150" fill="#0091e5" />
	</svg>
</svg>

表示範囲と表示サイズを指定するviewBox属性あります。
指定の仕方は、
viewBox=”x y width height”
こんな感じ。では、試してみます。

HTML
<svg
	width="300"
	height="300"
	viewBox="0 0 150 150"
	xmlns="http://www.w3.org/2000/svg"
	version="1.1">
<circle cx="150" cy="150" r="150" fill="#e5000d" />
</svg>

さて、これがどういう状況なのかを、図で説明してみます。

こんな感じです。
これが、viewBox属性です。

主に使用しそうなsvg要素の属性の説明は以上です。
他にもbaseProfile属性、preserveAspectRatio属性などなどありますが、これらは使用する際に記事にしたいと思います。