JPEG だけでなく PNG 等の通常は img で表示するであろう画像ファイルを svg の一部として表示する方法。

このような画像を2つ貼ってみる。

大きさは 300x200px で、黄色い図形が描かれていて、png の場合はこの白い部分が透過になっている。

<svg id="hoge">
    <image xlink:href="hoge.jpg" />
</svg>
<svg id="piyo">
    <image xlink:href="hoge.png" />
</svg>

このようになる

横 300px は表示されているが、縦が 150px で切れてしまっている

SVG 周りでは Firefox が全てにおいてサポートがよい

他に気づく点としては、svg は img と同様にデフォルトではインライン要素として描画されているということである。 普通に2つの要素が横に並んでいる。

まったく表示されない。しかし、svg画像がそこに要素としては存在はしているっぽい。 中身が描画されてないだけ。

Firefox 同様に表示はされているが、縦が 150px で切れてしまっている。

どうやらこれが標準の挙動らしい

CSS で指定する

#hoge{
    width: 300px;
    height: 200px;
}
#piyo{
    width: 300px;
    height: 200px;
}

きっちり全部表示された

そもそもまったく表示されない。のでまったく表示されないのはかわりない

Firefox 同様にきっちり全部表示された。

つまり透過を確かめてみる

body{
    background-color: red;
}

PNG はちゃんと透けている

背景が単純に赤くなるだけで何もない。本当に枠すら表示されてないことがわかる

Firefox 同様に PNG は透過している。

#hoge{
    width: 400px;
    height: 200px;
}
#piyo{
    width: 300px;
    height: 300px;
}

jpg 側はより大きな幅にして、png 側はより高い幅にしてみる。

HTML上の svg 画像として確保される領域が広がるだけで内容物に影響が無い

2つの画像の間が広がっているのは hoge が多く領域を確保しているからで、 2個めの画像がより上に表示されているのは、より高さが増えたことで、インラインで下端に画像が揃っているからである。

表示されない

Firefox 同様