3.画像の貼り付け

画像（image）

画像（JPEG, PNG, GIF）を入りつけるためには、画像（image）タグを使う。
画像の参照は、xlink:href 属性に指定する。
注意点は、大きさ（width, height）を指定しないと画像が表示されない点である。

<image xlink:href="cat.gif" x="20" y="20" width="128" height="128" />
<image xlink:href="cat.gif" x="160" y="20" width="128" height="128" 
    opacity="0.5" />

画像の大きさ（width, height）を指定すると、元の画像が自動で伸張される。

<image xlink:href="cat.gif" x="20" y="20" width="128" height="128" />
<image xlink:href="cat.gif" x="160" y="20" width="40" height="40" />
<image xlink:href="cat.gif" x="160" y="80" width="200" height="200" />

ただし、拡大縮小をしたいなら、座標変換（transform）を使い、スケール（scale）を指定したほうがよいだろう。

<image xlink:href="cat2.gif" x="20" y="20" width="64" height="64" />
<image xlink:href="cat2.gif" x="50" y="20" width="64" height="64" 
    transform="scale(2,1)" />
<image xlink:href="cat2.gif" x="50" y="200" width="64" height="64" 
    transform="scale(0.5, 0.5)" />

スケール（scale）は（x方向の拡大率, y方向の拡大率）で指定する。
ただし、xy座標も拡大縮小されてしまうため、位置までもずれてしまう。 xy座標を変更するのは面倒なので、グループ（g）を使い、拡大（scale）した後に位置決め（translate）する、という流れで指定するとよいだろう。

<image xlink:href="cat2.gif" x="20" y="20" width="64" height="64" />
<g transform="translate(100,20)">
    <image xlink:href="cat2.gif" width="64" height="64" 
        transform="scale(2,1)" />
</g>
<g transform="translate(20,100)">
    <image xlink:href="cat2.gif" width="64" height="64" 
        transform="scale(0.5, 0.5)" />
</g>

パターン（pattern）

パターン（pattern）を使うことで、矩形や円などの図形の塗りつぶし（fill）で指定することができる。
パターンを参照するときは fill="#url(パターンID）" のようにパターン指定する。

<!-- make pattern -->
<pattern id="cat" width="64" height="64" patternUnits="userSpaceOnUse" >
    <image xlink:href="cat2.gif" width="64" height="64" />
</pattern>
<!-- rectangle and circle -->
<rect x="20" y="20" width="120" height="120" 
    fill="url(#cat)" 
    stroke="orange" stroke-width="2" />
<circle cx="220" cy="80" r="60"
    fill="url(#cat)"
    stroke="orange" stroke-width="2" />

パターンは、枠線（stroke）にも指定ができる。
線（line）の stroke 属性にパターンを指定したり、polygon, polyline なども使える。

<!-- line and polygon -->
<line x1="20" y1="20" x2="120" y2="120"
    fill="none" stroke="url(#cat)" stroke-width="20" />
<line x1="20" y1="120" x2="120" y2="20"
    fill="none" stroke="url(#cat)" stroke-width="20" />
<polygon points="200,20 140,120 260,120"
    fill="none" stroke="url(#cat)" stroke-width="20" />

copyleft by marenijr