svgのimage要素で外部画像を表示する
html <svg viewBox="0 0 300 150" width="300" height="150">
<image
x="0" y="0" width="300" height="150"
xlink:href="data:image/png;base64,...">
</image>
</svg>ポイント
viewBox, x, y を省略せずに書く
一部のブラウザで表示が崩れることがあるため
拡縮がうまく効かなくなることがあるため
imageタグにはbase64 encodingしたdata URI画像をセットする
SVGタグ内で外部リソースを参照すると、imgタグで表示できない
最近の食事のimageを外部画像参照に変えてみる例
外部参照している部分だけが読み込まれない
SVG Screenshotでsvgタグ内に配置したaタグが描画されないのも、同じ理由だと思う
遷移先が外部リソースであるため
svgタグ、objectタグで表示するぶんには大丈夫
上の画像も、クリックして別タブで開くとちゃんと見れる
img.srcにdata URIを与える際に気をつけること
探究 SVGとスクリーンショットに書いた