image

画像データを表示する。JPEG,PNG,GIFが使用できる。

書き方

<image x="X座標" y="Y座標" width="幅" height="高さ" xlink:href="画像データURL">

</image>

x="X座標"

画像データの左上角の座標を指定する。

y="Y座標"

画像データの左上角の座標を指定する。

width="幅"

画像データの幅を指定する。

height="高さ"

画像データの高さを指定する。

xlink:href="画像データURL"

画像データの場所をURLで指定する。

使用例

おせち画像の上に説明を重ねてみました。大きい画像と小さい画像はいずれも、同じ画像データを使用しています。

<rect x="0" y="0" width="400" height="250" fill="lightgreen" stroke="none"/>

<image x="2" y="2" width="300px" height="222px" xlink:href="osechi200201010753.jpg">
<title>おせち大</title>
</image>
<image x="320" y="180" width="60px" height="44px" xlink:href="osechi200201010753.jpg">
<title>おせち小</title>
</image>

<rect x="249" y="136" width="45" height="16" fill="white" stroke="white"/>
<text x="250" y="150" font-size="14" fill="red">のし鳥</text>
<rect x="49" y="186" width="145" height="16" fill="white" stroke="white"/>
<text x="50" y="200" font-size="14" fill="red">パイナップルきんとん</text>
<rect x="249" y="36" width="30" height="16" fill="white" stroke="white"/>
<text x="250" y="50" font-size="14" fill="red">錦卵</text>
<text x="330" y="50" font-size="42" fill="black">お</text>
<text x="330" y="100" font-size="42" fill="black">せ</text>
<text x="330" y="150" font-size="42" fill="black">ち</text>
<text x="10" y="243" font-size="16" fill="black">2002年1月1日</text>
<text x="310" y="240" font-size="10" fill="white">A Happy New Year.</text>