SVG／スタイルシート

SVGの属性には、位置や長さなどの位置や形状を設定するものと、色や透明度、塗りつぶし、フォントなど視覚的な効果を決めるものがあります。後者の属性を CSS（Cascading Style Sheets）、いわゆる「スタイルシート」として記述することで、グラフィックの見た目を図形構造から切り離して定義できます。

スタイルシートの書き方

グラフィックの属性のfill="..."やstroke="..."などを、HTMLのCSSと同様に「.css」ファイルに記述して、SVG文書の中で読み出します。SVG文書からCSSファイルを適用するにはXMLを次のように指定します。
<?xml-stylesheet type="text/css" href="xxxx.css"?>
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="xxxx.css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http:/awww.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="40" height="60"/>
    <rect x="30" y="30" width="40" height="60"/>
</svg>
Picture
xxxx.css
rect {
    fill: teal;
    stroke: navy;
    stroke-opacity: 0.2;
    fill-opacity: 0.7;
}
CSSの使い方はHTMLと同じです。CSSのセレクタをrectとしたとき、SVG内のrect要素にスタイルが適用されます。classでスタイルを適用する場合は次のようにします。
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="xxxx.css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http:/awww.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <rect class="c_rect1" x="10" y="10" width="40" height="60"/>
    <rect class="c_rect2" x="30" y="30" width="40" height="60"/>
</svg>
Picture
xxxx.css
.c_rect1 {
    fill: orange;
    fill-opacity: 0.8;
}
.c_rect2 {
    fill: none;
    stroke: forestgreen;
    stroke-width: 3;
    stroke-opacity: 0.3;
}

インラインスタイル

style属性により、要素の中にインラインで CSSを入れることができます。
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http:/awww.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <rect x="30" y="30" width="40" height="60"/>
    <rect x="10" y="10" width="40" height="60"
        style="fill:gray; stroke=red; fill-opacity:0.4;"/>
</svg>
Picture