== 図形をまとめて扱う ==

いくつかの図形をまとめてグループとして扱ったり、図形に名前をつけ名前で図形を参照するための要素です。
 * group
 * symbol
 * use

----
=== グループ ===

いくつかの図形をまとめてグループとして扱うことができます。
グループをさらにグループの中に含むこともできます。

グループの記述には g 要素を使います。
 {{{
 <g fill="black">
   <g fill="red">
     <rect x="10" y="10" width="30" height="30" fill="blue" />
     <rect x="20" y="20" width="30" height="30" />
   </g>
   <rect x="30" y="30" width="40" height="40" />
 </g>
 }}}

この例では２つのグループがあり、一方のグループはもう１つのグループを含んでいます。
 . fill属性を外側のグループで指定することで、個々の図形での指定を省略しています。
 . 属性の値は継承されます。
 . １つ目の長方形は青、２つ目の長方形は赤、３つ目の長方形は黒になります。

----
=== id 属性 ===

id属性を使って図形やグループには名前をつけることができます。
名前をつけておくと、ほかの場所で使うことができます。

長方形２つからなるグループに rei という名前をつけた例です。
 {{{
 <g id="rei">
     <rect x="10" y="10" width="30" height="30" />
     <rect x="20" y="20" width="30" height="30" />
 </g>
 }}}

----
=== use 要素 ===

名前をつけた図形やグループを使うには use 要素で記述します。
 {{{
 <use xlink:href="#rei" x="100" y="50" />
 }}}
これは rei　という名前で定義された図形（グループ）を、位置(100,50)に表示せよという指示になります。
描画する座標(100,50)が、グループreiでの座標(0,0)に対応します。

名前は id 属性で定義されたものです。

参照の書きかたに注意してください。'''xlink:href="#名前"'''　です。

例
 {{{
 <g id="g1" style="fill:blue; stroke:none;">
     <circle cx="50" cy="20" r="10" />
     <circle cx="50" cy="50" r="20" />
 </g>
 <use xlink:href="#g1" x="100" y="0" />
 }}}
大小の円を重ねた図形を g要素でグループ化しています。
名前を g1 と付けています。
色はg要素で指定し、個々のcircle要素には記述していません。

use要素でg1を参照し、ｘ方向に１００ずらした位置に描画します。

同じ形の図形が g の箇所と use の箇所の２回描画されます。

----
=== defs内に記述する ===

<defs> ... </defs> の内部に書いた要素は、定義だけが行われ、その時点では描画は行われません。
図形の定義だけを行ってその時点では描画をしないで、あとで use で使うことができます。

<defs> ... </defs>はSVGデータの中に１つしか書けませんでした。
したがって、通常のSVGデータはつぎのような構造になります。
{{{
<svg ... ...>
    <title>タイトル</title>
    <defs>
        スタイルの定義
        図形の定義
        ...
    </defs>
    図形の記述
    ...
</svg>
}}}
先ほどの例の g の部分を defs 内に移動し
{{{
<defs>
 <g id="g1" style="fill:blue; stroke:none;">
        <circle cx="50" cy="20" r="10" />
        <circle cx="50" cy="50" r="20" />
     </g>
</defs>
<use xlink:href="#g1" x="100" y="0" />
}}}
とすると、描画されるのは use で指定したものだけになります。

----
=== use 要素に style を記述する ===

use 要素に style を記述することもできます。
下の例では、use要素でstyleを記述し、色を変えて描画しています。
g要素で定義された図形のうち、styleの指定されていない２つのcircleの色はuseで指定したものになります。
３つのcircleのうち3つ目のものは定義のときにstyleが指定されており、useで指定された色ではなく、circleで指定された色になります。
{{{
<defs>
 <g id="g1">
        <circle cx="50" cy="20" r="10" />
        <circle cx="50" cy="50" r="20" />
        <circle cx="50" cy="50" r="5" style="fill:none; stroke:blue;"/>
     </g>
</defs>
<use xlink:href="#g1" x="100" y="0" style="fill:#f80; stroke:none;"/>
<use xlink:href="#g1" x="200" y="0" style="fill:#8ff; stroke:none;" />
}}}

----
=== symbol要素 ===

g の代わりに symbol を用いてグループを作ることもできます。
違いは次の２点です。

１）symbol で定義したグループは（すぐには）描画されない。

 . defs内に書かなくても、定義だけが行われ描画されません。
 . defs内に書いても同じです。

２）symbol には viewBox を指定することができる。
 {{{
 <symbol id="rei" viewBox="-10 -10 20 20">
   図形の記述
 </symbol>
 
 <use xlink:href="#rei" x="50" y="50" width="100" height="100" />
 }}}
のように用います。
viewBoxとwidth heightの対応はsvg要素の場合と同じです。