title: BLOB URL not working in Safari
body: <p>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 is used as an image, which is added to a canvas which can be exported.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
  var url = window.URL.createObjectURL(blob);
  
  // Put the svg into an image tag so that the Canvas element can read it in.
  var img = d3.select('body').append('img')
   .attr('width', width)
   .attr('height', height)
   .node();
  
  img.onload = function(){
    // Some method which is never called
  }
  img.src = url;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In Safari, the onload function is never triggered and the image element is also not displaying the image. I logged both the blob element and URL and both seem fine (if i manually open the blob URL in safari it downloads the SVG code). But it won't display it as an image and therefore i can't export it.</p>
  
  <p>Something i noticed is that when i inspect the img element and open the src in a new tab it opens on the URL  <a href="https://www.mysite.nl/mypage/blob:https://www.mysite.nl/2a173f60-8b34-4b1c-894b-4ff6adcfe9fa" rel="nofollow noreferrer">https://www.mysite.nl/mypage/blob:https://www.mysite.nl/2a173f60-8b34-4b1c-894b-4ff6adcfe9fa</a></p>
  
  <p>So for some reason Safari interprets the BLOB URL as a relative instead of an absolute one. Anyone got an idea on how to fix this?</p>