title: Inject an SVG image using a content script
body: <p>I have a chrome extension that injects JavaScript into a page using a content script and I want that script to add an SVG image to the page. Here's the code I'm using:</p>
  
  <pre class="lang-js prettyprint-override"><code>var url = chrome.extension.getURL('infotip.svg');
  $('#elementId').append('&lt;embed src="' + url +
      '" type="image/svg+xml" style="display: block; float: right;" /&gt;');
  </code></pre>
  
  <p>When I inspect the resulting DOM, the URL to the SVG file is set correctly (I can open it in a new tab from element inspector &amp; it works) but in the actual page, instead of the SVG I get a box with the Chrome warning:</p>
  
  <blockquote>
    <p>The webpage at <strong>chrome-extension://invalid/</strong> might be temporarily down or it may have moved permanently to a new web address.</p>
    
    <p>Error 2 (net::ERR_FAILED): Unknown error.</p>
  </blockquote>
  
  <p>I've tried using &lt;embed&gt; and &lt;object&gt; as per <a href="http://www.w3schools.com/svg/svg_inhtml.asp" rel="nofollow">W3Schools</a> and even &lt;img&gt;. Any ideas?</p>