title: Feature detection of absolute url images inside foreignObject
body: <p>After a little research i discovered that Chrome and Opera render images inside a foreignObject if they have an absolute path, Firefox renders images only if they are in data-uri format because it does not load any external resource. </p>
  
  <p>I've tried several methods but i cannot find a way to feature-detect this behaviour, for example i've tried to check the dimensions of the image in the foreignObject but they are always right, Firefox simply draws a transparent rectangle with the same image size.</p>
  
  <p>Do you know how to do this?</p>
  
  <p><strong>CODE</strong>
  This situation is hard to reproduce, but you can test it in this way:</p>
  
  <ul>
  <li>Go to google homepage</li>
  <li>Open firebug console or javascript console on Chrome</li>
  <li>execute this code:</li>
  </ul>
  
  <p>:</p>
  
  <pre><code>var img = new Image();
  
  img.src="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1MzgnIGhlaWdodD0nMTkwJz48Zm9yZWlnbk9iamVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48aW1nIHNyYz0iaHR0cHM6Ly93d3cuZ29vZ2xlLml0L2ltYWdlcy9zcnByL2xvZ28xMXcucG5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9Im1hcmdpbjogMHB4OyIvPjwvZm9yZWlnbk9iamVjdD48L3N2Zz4=";
  
  document.body.appendChild(img);
  </code></pre>
  
  <p>on Chrome the logo image is visible, on Firefox it isn't. The svg code is base64 encoded, this is the original code:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="538" height="190"&gt;
  &lt;foreignObject width="100%" height="100%"&gt;
  &lt;img src="https://www.google.it/images/srpr/logo11w.png" xmlns="http://www.w3.org/1999/xhtml" style="margin: 0px;"&gt;
  &lt;/foreignObject&gt;
  &lt;/svg&gt;
  </code></pre>