グラフィックタグには、その図形を作成するのに不可欠な属性が用意されていますが、使える属性はそれだけではありません。各図形に共通する属性というのも用意されています。それらについて整理しておきましょう。

◯色の属性
色に関する属性は、ほぼすべてのグラフィックタグに用意されています。「fill」が内部を塗りつぶした際の色、「stroke」が線分の色になります。これらの色の値は、スタイルシートで用いられる形式で指定されます。以下のような形ですね。

fill="red" stroke="blue"
fill="#FF0000" stroke="#0000FF"
fill="rgb(255,0,0)" stroke="rgb(0,0,255)"

◯線の太さ
輪郭線などの線の太さは「stroke-width」という属性として用意されています。これは位置や大きさなどと同様、数値と単位の組み合わせで指定します。

stroke-width="5px"

◯透過度
それぞれの図形では、透過度を指定することができます。これは３つの属性として用意されています。「opacity」が図形全体の透過度を示すもので、通常はこれで図形全体の透過度を設定できます。「fill-opacity」は内部の塗りつぶし部分、「stroke-opacity」は線分の部分のみの透過度で、これらは内部と線分の透過度を別々に設定するのに用いられます。いずれも、０〜１の実数で指定されます。ゼロならば透明となり、１ならば不透明となります。

opacity="0.5" stroke-opacity="0.75" 
            fill-opacity="0.25"

こうした属性は、それぞれのタグに用意できて便利ではありますが、「いちいちすべてのタグに書かないと適用されない」というのは面倒くさいものですね。そこで、いくつかのタグで同じ設定をする場合、それらをグループ化して設定するためのタグというのが用意されています。<g>タグというもので、以下のように使います。

<g ……設定する属性を用意する……>
    ……ここにタグを書く……
</g>

この<g>タグを用意してあらかじめ属性を指定しておき、その中にグラフィックタグを記述すると、それらのグラフィック全てに<g>タグの属性が適用されます。下のリストに簡単な例を挙げておきましょう。ここでは、fill、stroke、stroke-widthといった項目を<g>タグに用意しています。これにより、描かれたすべての図形で同じ色と線の太さが適用されます。

リストをよくみると、widthやheight、opacityなどもすべて共通の値であることに気づくでしょう。なぜ、これらの値は<g>タグに用意されていないのか。――実は、<g>タグはすべての属性を指定できるわけではないのです。色や線の属性などは行えますが、透過度や位置・大きさといった値は<g>タグで共有することはできません。どういったものが<g>タグで使えるか、それぞれで確認してみるとよいでしょう。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="300px" 
		xmlns="http://www.w3.org/2000/svg">
	<g fill="red" stroke="blue" stroke-width="5px">
		<rect x="20px" y="20px" width="100px" 
			height="100px"  opacity="0.5" />
		<rect x="30px" y="60px" width="100px" 
			height="100px"  opacity="0.5" />
		<rect x="50px" y="90px" width="100px" 
			height="100px"  opacity="0.5" />
		<rect x="80px" y="110px" width="100px" 
			height="100px"  opacity="0.5" />
		<rect x="120px" y="120px" width="100px" 
			height="100px"  opacity="0.5" />
	</g>
</svg>