カスケーディング・スタイルシート（CSS）は、Webページやサイト全体でスタイルを定義、整理する効率的な方法としてWebページのデザインで利用されています。SVGは、CSS2定義スタイルシートをサポートしていますので、インライン、埋め込み、外部スタイルシートを使って作成することができます。テキスト属性からレイアウト（行間など）やグラフィック属性（塗りと線のプロパティ）がスタイルとして定義できます。

カスケーディング・スタイルシートは、セレクタとスタイルという２つの部分で定義されます。以下の例では、"st0" がセレクタで、"fill:red"がスタイルです。

.st0 {fill:red;}

スタイルを使うと、一回定義を編集しただけで、ドキュメント全体の変更をいっぺんに行うことができます。

上のサンプル画像では、スタイルシートを使わずに、次のように角の丸い四角形のパスを定義しています。

<g id="round_corners">
	<g style="stroke:#990000;stroke-width:2;>
		<path d="M37.693,104.875c0,..."/>

これに対して、埋め込みスタイルシートを使うと、インライン・スタイル属性が、ドキュメント先頭で一回だけ定義されたスタイルを参照する"class"属性で置き換えられます。これで、"round_corner" エレメントに対する変更を実行したい場合は、スタイル定義を変更するだけで、ドキュメントの変更がいっぺんに確認できるようになります（この例では30エレメント）。

.st2{fill:none;stroke:#990000;stroke-width:2;}

は、次のように変更されます。

.st2{fill:#000FF;fill-opacity:.5;stroke:none;}

Adobe Illustrator 9.0は、書き出したSVGのインライン・エンティティとしてスタイルを生成します。インライン・スタイルのメリットは、表示性能の向上、つまり画像の読み込み速度が速くなります。上の例のようなスタイルの一括編集は、Illustrator書き出しのSVGの場合でも行えます。エンティティ定義はやはりドキュメントの先頭に置き、これらの定義を編集することによって、セレクタのスタイル編集と同じ結果を得られるのです。エンティティと埋め込みスタイルシートのいずれを使った場合にも文字数が削減できるので、ファイルサイズを小さくできる点にご注目ください。

上の例では、埋め込みスタイルシートの便利さとパワーをご紹介しました。さらに、SVGファイルは、親ドキュメントと共有できる外部スタイルシートのスタイルも参照できます。フォントはプラットフォーム固有で、カラーはWebサイト全体の一貫性確保のために一括して定義しておくことができます。SVGファイルをWebサイトにドロップすれば、サイト・デザインの主な属性を自動的に引き受けるようになるのです！　言語やアクセス仕様に基づいてサイトの表示を全く異なるものに変えて開発することも可能です。 （多言語表示をごらんください）。

ここをクリックして 同じ外部スタイルシートでコントロールされたHTMLとSVGエレメントの例を参照してください。これらの例を見れば、同じHTMLとSVGの２つのバージョンが外部スタイルシートの違いによって劇的に変化するのがおわかりになるはずです。画像の下のリンクをクリックして、これらのファイルのソースをダウンロードしてください。

xss_demo.zip (41.1K)をダウンロードする

次のレッスン：塗り