svg blobbed image is broken after encoding it - svg

Question

I've tried parsing an image into blob and refer it in image tag in svg:
`<image xlink:href="${imgRef}" height="${h}" width="${w}" stroke="red" x="50%" y="50%" transform="translate(${-(w / 2)}, ${-(h / 2) - 4})"/>`
and embed it in svg:
const w = 100; // width
const h = 65; // height
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" xmlns:xlink="http://www.w3.org/1999/xlink">` +
`<image xlink:href="${imgRef}" height="${h}" width="${w}" stroke="red" x="50%" y="50%" transform="translate(${-(w / 2)}, ${-(h / 2) - 4})"/>` +
`</svg>`;
Then I tried encoding it through 'data:image/svg+xml;,' + encodeURIComponent(svgString) and it shows a broken image. I tested the above svg string before encoding it via document.body.innerHTML = svgString and the svg image is well displayed. So I'm suspecting the encoding part but it doesn't seem wrong based on many references.
What am I missing? Any insight would be appreciated.
Demo link: https://codepen.io/Dongbin/pen/poRmbmg?editors=0010

Answer 1

External images (ie <img> or CSS background-image) must be self contained. They cannot refer to resources outside the image itself. Basically that means if you need to reference any files (bitmap images, fonts, etc) as part of the SVG image, they need to be Data URLs.
The fix is to not use canvas.toBlob(). Use canvas.toDataURL() instead.
const imgRef = canvas.toDataURL();
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" ` +
`xmlns:xlink="http://www.w3.org/1999/xlink">` +
`<image xlink:href="${imgRef}" height="125" width="200"/>` +
`</svg>`;
Update
If you URI Encode the SVG, it should work.
See: https://jsfiddle.net/dxkeqfnr/
const img = new Image();
img.src = 'https://live.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg';
img.crossOrigin="anonymous"
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 125;
canvas.getContext('2d').drawImage(img, 0, 0, 200, 125);
canvas.toBlob((blob) => {
const imgRef = URL.createObjectURL(blob);
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="125" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="${imgRef}" height="125" width="200"/></svg>`;
//div.innerHTML = svgString;
const newImg = new Image();
newImg.src = `data:image/svg+xml,${encodeURIComponent(svgString)}`;
document.body.appendChild(newImg);
});
};
It works in Firefox, but it doesn't work in Chrome. That seems to be a bug. I have reported the bug to Chrome