BLOB URL Not Working In Safari

I'am using D3 to generate a graph and want to export this to an image, which works fine in all browsers except Safari. The code generates a D3 SVG, which is used in a BLOB, which i

Solution 1:

Safari doesn't like your Blob's MIME Type.

The correct one is image/svg+xml the charset header is useless, and while I'm not sure it's actually allowed to be there, it is anyway useless.

So remove the ;charset=utf-8 part from your type option, and you'll be fine:

var blob = new Blob(['<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect y="0" width="100" height="100" rx="15" ry="15" x="0"></rect></svg>'], {
  type: 'image/svg+xml' // this is the only MIME for SVG
});
document.body.appendChild(
  new Image()
).src = URL.createObjectURL(blob);