== 画像の表示 ==

jpgやpng形式の画像ファイルを指定して画像を表示させることができます。

image要素を使って次のように書きます。
 {{{
 <image xlink:href="heart.jpg" x="0" y="0" width="100" height="100" />
 }}}

----
=== クリップ ===

クリップとは図形の一部分だけを切り取って表示するものです。
 {{{
 <defs>
     <g id="gr">
         ...
     </g>
     <clipPath id="p2">
         ...
     </clipPath>
 </defs>
 <use xlink:href="#gr" style="clip-path:url(#p2);" />
 }}}
defs要素で２つの定義を行っており、 p2 と gr という名前をつけています。

gr で描く図形を定義し、
p2 で切り取るのに使うパスを定義しています。

useで名前が gr の図形を描くときに、styleにclip-pathを指定し、指定されたパス p2 の内側だけを表示するものです。

クリップパスの定義は '''clipPath'''
クリップパスの利用は '''clip-path'''
と異なっているので注意しましょう。