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.
This page has all the answers, I believe :
https://css-tricks.com/svg-use-external-source/
you can run into some cross-domain issues with this technique when developing locally, if you aren’t developing with a server.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With