Sabumnim Sabumnim - 1 month ago 36
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>
</svg>


and the SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 70 70">
<g
id="menu">
<path
d="m 10,15 50,0"
style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
<path
d="m 10,30 50,0"
style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
<path
d="m 10,45 50,0"
style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
</g>
</svg>


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.

Answer

This page has all the answers, I believe :

https://css-tricks.com/svg-use-external-source/

  • 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.