svgのimage要素で外部画像を表示する

code:html

<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を外部画像参照に変えてみる例

外部参照している部分だけが読み込まれない

https://storage.googleapis.com/daiiz-bucket-1/public/external_img.svg

SVG Screenshotでsvgタグ内に配置したaタグが描画されないのも、同じ理由だと思う

遷移先が外部リソースであるため

svgタグ、objectタグで表示するぶんには大丈夫

上の画像も、クリックして別タブで開くとちゃんと見れる

img.srcにdata URIを与える際に気をつけること

https://gyazo.com/32389ec22d12d70662e7f2bb324d3060 https://developers.google.com/web/fundamentals/design-and-ux/responsive/images