Why won't the SVG load in chrome extension?

Question

I am injecting some HTML into websites using a chrome extension. In that code I am including an SVG. But when I load websites I get

Failed to load resource: the server responded with a status of 404 (Not Found) http://stackoverflow.com/questions/SVG/home-outline.svg

All of my svg files are in a folder called SVG. I am loading the SVG files with "web_accessible_resources": ["SVG/*.svg"] as I have loaded my other files. Why won't my image load?

<span class="menu_T">
    <button class="large_menu_button_T">
        <img src="SVG/home-outline.svg">
    </button>
</span>

I get the same result when I try to add the svg through css background.

Answer 1

In the injected code, relative paths like "SVG/home-outline.svg" point to the site you're injecting to.

You need a full path to the resource in your extension. It's easy to get it: chrome.runtime.getURL("SVG/home-outline.svg") does the job.