<svg>要素は、CSS(Cascading Style Sheets)は密接な関係を持っています。
各図形要素の線(stroke)や塗りつぶし(fill)など、スタイルを示す属性は、必要に応じてCSSで定義することができます。

図形要素の属性としてスタイルを定義

SVGの基本的スタイル指定方法です。
下記のように直接、線色や塗りつぶしを指定します。

<rect fill="red" stroke="blue" />

図形要素のstyle属性として定義

html要素と同様にstyle属性を用いてスタイルを指定する方法です。
下記のように線色や塗りつぶしを指定します。

<rect style="fill:red;stroke:blue;" />

<style>要素(インラインスタイルシート)でまとめてとして定義

html要素と同様に<style>要素を用いてスタイルを指定する方法です。
要素名、id、classなどでスタイルを指定できます。
下記のように線色や塗りつぶしを指定します。

<svg id="svg0101" width="500" height="200">
	<rect id="red_rect" class="blue-box"  />
</svg>
<style>

svg {
	background-color : silver;
}
rect {
	stroke-width : 2px;
}
#red_rect {
	fill : red;
}
.blue-box {
	stroke : blue;
}

</style>
								

外部スタイルシートでまとめてとして定義

html要素と同様に別途用意したスタイルシートを用いて指定する方法です。
外部スタイルシートの呼び出し方は、一般的なHTML文書と同様です。

<link href="style.css" rel="stylesheet" type="text/css" media="all" />

<svg>要素に対してCSS3プロパティが適用出来るものは少ないです。
しかし、半透明など一部のCSS3メソッドを適用することは可能です。

<svg id="svg0201" width="500" height="200">
	<circle cx="150" cy="100" r="80" class="stroke-r-a fill-b-a" />
	<circle cx="250" cy="100" r="80" class="stroke-g-a fill-r-a" />
	<circle cx="350" cy="100" r="80" class="stroke-b-a fill-g-a" />
</svg>
<style>
.stroke-r-a {
	stroke : rgba(255,0,0,0.8);
}
.stroke-g-a {
	stroke : rgba(0,255,0,0.5);
}
.stroke-b-a {
	stroke : rgba(0,0,255,0.3);
}
.fill-r-a {
	fill : rgba(255,0,0,0.3);
}
.fill-g-a {
	fill : rgba(0,255,0,0.5);
}
.fill-b-a {
	fill : rgba(0,0,255,0.8);
}
</style>