svgのimage要素で外部画像を表示する
code: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した画像をセットする
svgタグ内で外部リソースを参照すると、imgタグで表示できない
/daiiz/最近の食事のimageを外部画像参照に変えてみる例
外部参照している部分だけが読み込まれない
https://storage.googleapis.com/daiiz-bucket-1/public/external_img.svg
/daiiz/SVG Screenshotでsvgタグ内に配置したaタグが描画されないのも、同じ理由だと思う
遷移先が外部リソースである為
svgタグ、objectタグで表示するぶんには大丈夫
上の画像も、クリックして別タブで開くとちゃんと見れる