Inject an SVG image using a content script

Question

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:

var url = chrome.extension.getURL('infotip.svg');
$('#elementId').append('<embed src="' + url +
    '" type="image/svg+xml" style="display: block; float: right;" />');

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 & it works) but in the actual page, instead of the SVG I get a box with the Chrome warning:

The webpage at chrome-extension://invalid/ might be temporarily down or it may have moved permanently to a new web address.

Error 2 (net::ERR_FAILED): Unknown error.

I've tried using <embed> and <object> as per W3Schools and even <img>. Any ideas?