title: Is encoding an image in base64 make svg <image> load synchronously?
body: <p>I have an <code>&lt;image&gt;</code> svg that is generated by another system.<br>
  My goal is to popup the print dialog box once all the images and font files have been rendered onto a new window.</p>
  
  <p>I have tried a lot of methods and found out that the browsers don't implement the svg w3 standard properly, for example I tried the code below using images that are called with a url but the 'onload' event fires sporadically.<br>
  Some obscure answer said it's because the browser caches the images, so I tried appending random query strings to the image; that did not work either.</p>
  
  <p>I tried everything under the sun, now I am trying to embed a base64 image into the file and see if it forces the browser to load the image synchronously?</p>
  
  <p>Question is, is it possible to force the browser to render the image first by using base64 image? I care mostly for the Chrome browser.</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>var svgFile = `&lt;svg&gt;
  &lt;image externalResourcesRequired="true" id="testImage" x="-600" y="2040" height="100px" width="100px" xlink:href=""/&gt;
  &lt;/svg&gt;`;
  
  
  var win = window.open();
  
  win.document.write('&lt;style type="text/css"&gt;body{margin: 0;padding: 0}  &lt;/style&gt;');
      win.document.write('&lt;style type="text/css" media="print"&gt;@page {size: auto; margin: 0mm;}&lt;/style&gt;');
  win.document.write(svgFile);
  
  
  var testImage = win.document.getElementById('testImage');
  
  testImage.onload = function () { //after image is fully loaded
    win.focus(); //necessary for IE &gt;= 10
    win.print();
    win.close();
    return true;
  }
  
  var imageInBase64 = 'iVBORw0KGgoAAA...';
  testImage.setAttribute('xlink:href', imageInBase64);
  </code></pre>
  
  <p>I also tried the code below to see if the rendering catches up with javascript execution (put it in the event queue), but it does not seem to work.</p>
  
  <pre><code>setTimeout(function(){ 
     win.focus(); //necessary for IE &gt;= 10
     win.print();
     win.close();
     return true;
  }, 0);
  </code></pre>
  
  <p>Another thing, I read somewhere that the onload event does not fire for generated svg code unless it is parsed by the browser directly.</p>