Sabumnim Sabumnim - 8 months ago 264
HTML Question

Unsafe attempt to load URL svg

I am getting an error in Chrome from trying to load an SVG on my local file system:

Unsafe attempt to load URL file:///C:/Users/Me/Documents/HTML/icons.svg#menu from frame with URL file:///C:/Users/Me/Documents/HTML/master.html. Domains, protocols and ports must match.

Here is my HTML:

<svg id="icon-menu" viewBox="0 0 70 60">
<use xlink:href="icons.svg#menu"></use>

and the SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
viewBox="0 0 70 70">
d="m 10,15 50,0"
style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
d="m 10,30 50,0"
style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
d="m 10,45 50,0"
style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />

I have searched around the internet, but the only solutions I can find are for code already written in JavaScript, but this is not. The HTML above does not work in IE, giving no error, but works without a hitch in Firefox.


This page has all the answers, I believe :

  • It just doesn't work on IE unless you use a polyfill.
  • Comments down the page describe the issue on Chrome when running locally :

you can run into some cross-domain issues with this technique when developing locally, if you aren’t developing with a server.