SVGファイルの参照

画像（image）を貼り付けるときに、xlink:href 属性を使い、ファイルを参照できる ようになるが、これは他の SVG ファイルを参照させてもよい。

<image xlink:href="0071.svg" x="20" y="20" width="100" height="100" />
<image xlink:href="0071.svg" x="50" y="50" width="80" height="80" />

点線で囲った部分が image タグを使って大きさ（width, height）を指定した部分になる。 SVG 同士の画像を重ねた場合、円以外の背景部分は透けて見えることがわかる。

<!-- left image -->
<image xlink:href="0081.svg" x="20" y="20" width="100" height="100" />
<image xlink:href="0081.svg" x="50" y="50" width="80" height="80" />

<!-- right image -->
<image xlink:href="0082.svg" x="160" y="20" width="100" height="100" 
    opacity="0.5" />
<image xlink:href="0082.svg" x="190" y="50" width="80" height="80" 
    opacity="0.5" />

0081.svg（右側で参照）

<svg xml:space="default" height="100" width="100">
    <circle cx="50" cy="50" r="45" fill="orange" 
        stroke="red" stroke-width="3" opacity="0.5"/>
</svg>

0082.svg（左側で参照）

<svg xml:space="default" height="100" width="100">
    <circle cx="50" cy="50" r="45" fill="orange" 
        stroke="red" stroke-width="3"/>
</svg>

透明度（opacity）を指定してみると、あらかじめ参照先の SVG に透明度を指定したとき（左図）と image タグで透明度を指定したとき（右図）とは、異なる。
意味合い的には、右のように image タグに透明度（opacity）を指定したときに、透明度が 指定されたほうがよいと思うのだが、これは注意点として覚えておくとよいだろう。

まとめ

画像については、フィルタ（filter）を使うことによって自由に画像を加工することができる。
フィルタについては、別に章を設ける。

要素（element）	主な属性（attribute）	属性の値
画像（image）	x, y, width, height	座標と大きさ
	xlink:href	画像ファイルを参照（JPEG, GIF, PNG, SVG）
	opacity	透明度を実数（0〜1）で指定
	transform	translate(x移動, y移動）で移動量を指定
	transform	scale(x倍率, y倍率）で拡大縮小を指定
図形（rect, circle など）	fill	塗りつぶしに url(#画像ID) で参照させる
	stroke	線に url(#画像ID) で参照させる