1. グループ化と複製
　<g>というタグを使って，幾つかの要素をまとめてグループ化することができます．それぞれのグループはidによって区別され，後から<use>タグを使って参照することができます．
　左図のような円を１つ描き，これにsample1というidをもつグループに入れます．
<g id="sample1">
<circle cx="-3" cy="-3" r="1" style="stroke:red;stroke-width:0.1;fill:#ffeeee;" />
</g>
この例のように要素が１つの場合は，グループ化しなくても，
<circle cx="-3" cy="-3" r="1" id="sample1" style="stroke:red;stroke-width:0.1;fill:#ffeeee;" />
のように，idをこの要素に直接付けることもできます．

idで識別された図形は，以後そのidを参照するだけで何度でも呼び出すことができます．ここでは，図形を複製することに使えます．
　複製する側はuseから始めますが，href="#sample1"で元データを参照します．この書き方は，HTML文書で同一ページ内を参照する場合とよく似ています．
　左上の円は元の画像ですが，これに次の太字の部分を追加します．
<g id="sample1">
<circle cx="-3" cy="-3" r="1" style="stroke:red;stroke-width:0.1;fill:#ffeeee;" />
</g>
<use xlink:href="#sample1" transform="translate(0,2)" />
transform=""は以下に登場する「変換transformation」を指示するための書き方です．この変換transformの１つの種類として，まず移動translateを使います．
英語のtranslateには，翻訳という意味の他に移動という意味があり，ここでは移動という意味です．
transform="translate(mx,my)"により，元のものはそのまま残して，x方向にmx，y方向にmyだけ移動した場所にその複製物を表示します（mx, myともビューポートのスケールです）．
transform="translate(0,2)"により，左図のようにx方向は動かさずに，y方向に２だけ移動した場所に，複製された円が追加されます．

　変換transformには，移動translate以外に拡大縮小scale(sx,sy)や回転rotate(θ)などもあり，これらは１つのtransformの中で同時に指定することができます．
　次の太字の部分２行を追加すると，左図のようにさらに２つの図が複製追加されます．
<g id="sample1">
<circle cx="-3" cy="-3" r="1" style="stroke:red;stroke-width:0.1;fill:#ffeeee;" />
</g>
<use xlink:href="#sample1" transform="translate(0,2)" />
<use xlink:href="#sample1" transform="scale(1.5,1) translate(2.5,2)" />
<use xlink:href="#sample1" transform="scale(1, 1.5) translate(2,1)" />
<use xlink:href="#sample1" transform="scale(1.5,1) translate(2.5,2)" />は元の円をx方向に1.5倍（y方向はそのままの比）に拡大したもので，横長のものができます．これを右に2.5，下に2だけ移動します．
<use xlink:href="#sample1" transform="scale(1, 1.5) translate(2,1)" />は元の円をy方向に1.5倍（x方向はそのまま）に拡大したもので，縦長のものができます．これを右に2，下に1だけ移動します．

　なお，transformにおいて，複数の変換をスペースまたはカンマで区切って指定することができます．
　複数の変換を１つのtransformの中で指定したとき，右から順に変換が行われます．この移動，拡大，回転の順序を変えると結果は変わります．
(1) 左図において，元の図形は(−3,−3)を左上端とする横幅1，縦幅1の長方形とします．この図形をtransform="scale(1,2),translate(3,4)"によって変換すると，第1にtranslate(3,4)により(0, 1)を左上端とする横幅1，縦幅1の長方形となり，次にscale(1,2)により「ビューポート座標の原点から見て，x方向の比率は変えずに，y方向を（輪郭も含めて全部）2倍にする」ので，(0,2)を左上端とする横幅1，縦幅2の長方形になります．
(2) 元の図形をtransform="translate(3,4),scale(1,2)"によって変換すると，第1にscale(1,2)により「ビューポート座標の原点から見て，x方向の比率は変えずに，y方向を（輪郭も含めて全部）2倍にする」ので，(−3,−6)を左上端とする横幅1，縦幅2の長方形になり，次にtranslate(3,4)により(0,−)を左上端とする横幅1，縦幅2の長方形になります．
(3) 元の図形をtransform="translate(2,-3),rotate(-45),scale(1,-1)"によって変換すると，第1にscale(1,-1)により左右は変わらず，y座標の上下が逆になるので，(−3,2)を左上端とする横幅1，縦幅1の長方形になり，次にrotate(-45)により「原点を中心として左向きに（反時計回りに）45°回転する」ので，y軸上の2.8を１つの頂点とするひし形になり，最後にtranslate(2,-3)により，それを右に２，上に3だけ移動させたものになります．

花を１つ完成させます．
茎の部分は初めに描き（最背面にして）部分的に隠れるようにする．
<line x1="-2" y1="-2" x2="-2" y2="2" style="stroke:green;stroke-width:0.5;fill:green;" />
左の葉
<rect x="-4" y="2" width="1.4" height="0.5" rx="0.5" ry="0.5" style="stroke:green;stroke-width:1;fill:green;" />
右の葉
<rect x="-1.5" y="2" width="1.4" height="0.5" rx="0.5" ry="0.5" style="stroke:green;stroke-width:1;fill:green;" />
花びらの１枚
<g id="rei1">
<circle cx="-3" cy="-3" r="1" style="stroke:red;stroke-width:0.1;fill:#ffeeee;" />
</g>
花びらの複製３枚
<use xlink:href="#rei1" transform="translate(0,2)" />
<use xlink:href="#rei1" transform="scale(1.5,1) translate(2.5,2)" />
<use xlink:href="#rei1" transform=" scale(1, 1.5) translate(2,1)" />
花の中心の雄しべ雌しべを黄色で描く
<circle cx="-2" cy="-2" r="0.7" style="stroke:yellow;stroke-width:0.2;fill:orange;" />

　グループ化はネスト（入れ子）にできるので，こうしてできた１つの花を１つのグループとして，花の複製を多数表示できます．

【変換transformの書き方】（まとめ，他）
(1) グループ化とidは次のように書く
<g id="...">
<ここにline,circle,rectなどによる描画を書く />
</g>
　要素が１つの場合は，グループ化しなくても，
<line x1=".." y1=".." x2=".." y2=".." id=".." />
のように，idをこの要素に直接付けることもできます．
(2) idを付けたものは，後に次の書き方で参照（複製）できる．
<use xlink:href="#.." />
参照元には#は付けずにidを書き，参照する側にはidに#を付けて使う．
(3) 変換transfromの１つの属性としての移動translateの書き方
transform="translate(mx,my)"により，ビューポート座標でx方向にmx，y方向にmyだけ移動する．
(4) 変換transfromの１つの属性としての拡大縮小scaleの書き方
　transform="scale(sx,sy)"により，ビューポートの原点を相似の中心として，図形の輪郭線も内部も共にx方向にsx倍，y方向にsy倍される．
　縦横比が同じときは，transform="scale(s)"のように１つの数字で拡大縮小比を書くことができる．
　特に，コンピュータ画面上の座標は，そのままではｘは右方向に増え，ｙは下方向に増えるのに対して，数学座標のようにｘは右方向に増え，ｙは上方向に増えるようにするにはtransform="scale(1,−1y)"としてｙ座標の符号を逆にするとよい．
(5) 変換transfromの１つの属性としての移動translateの書き方
transform="translate(mx,my)"により，ビューポート座標でx方向にmx，y方向にmyだけ移動する．
(6) 変換transfromの１つの属性としての拡大縮小scaleの書き方
　transform="scale(sx,sy)"により，ビューポートの原点を相似の中心として，図形の輪郭線も内部も共にx方向にsx倍，y方向にsy倍される．
　縦横比が同じときは，transform="scale(s)"のように１つの数字で拡大縮小比を書くことができる．
　特に，コンピュータ画面上の座標は，そのままではｘは右方向に増え，ｙは下方向に増えるのに対して，数学座標のようにｘは右方向に増え，ｙは上方向に増えるようにするにはtransform="scale(1,−1y)"としてｙ座標の符号を逆にするとよい．
(7) 変換transfromの１つの属性としての回転rotateの書き方
　transform="rotate(θ)"により，ビューポートの原点を中心として，角度θだけ回転する．角度の単位は°（60分法）
　時計回り（右回り）を正の角度で表し，反時計回り（左回り）を負の角度で表す．
　原点以外の特定の点(x,y)を中心として回転するときは，transform="rotate(θ,x,y)"と書く．
(8) 変換transfromの１つの属性として，x方向への傾斜skewXの書き方
　skewとは「斜め，斜めの，不公平な」という意味で，skewXでx方向に「いびつに，不公平に足す」という意味になる．
　transform="skewX(θ)"により，各点のｙ座標を変えずに，各点のｘ座標をに移す移動を行う．
　このようにx座標だけ足すと，結果的にｙ軸（正の向きは下向き）を角θだけ傾けた図ができる．
　⇒「名前」と「見た目」は逆になる：skewX(θ)でｙ軸が角θだけ傾く
　左の図は，skewX(30)による座標軸の変化をを示したものである．

(9) 変換transfromの１つの属性として，y方向への傾斜skewYの書き方
　skewY(θ)は各点のｘ座標を変えずに，ｙ座標をに移す移動を行う．
　⇒上と同様にして，「名前」と「見た目」は逆になる：skewY(θ)でｘ軸が角θだけ傾く

(10) 変換transfromの属性を複数個指定したときの結果
　複数の変換を１つのtransformの中で指定したとき，右から順に変換が行われます（危険な落とし穴！）．この移動，拡大，回転などの順序を変えると結果は変わります．
　例えば，transform="translate(2,-3),rotate(-45),scale(1,-1)"の場合，拡大縮小→回転→移動の順に変換が行われる．