CODEWITHSUNDEEP
htmlgoogle-chromesvg
Sabumnim
Sabumnim

Reputation: 711

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.

Upvotes: 26

Views: 62264

Answers (3)

Paul Frank
Paul Frank

Reputation: 1

use a server such as express.js or apache or nginx to serve the files for you want, preferably an svg sprite that holds all your images you need so you can reference them in the template or front-end like this

<svg style="color: red;">
    <use xlink:href="solid.svg#ad"></use>
</svg>

and in the back end if you're using express.js in your server.js file like this,

app.use(express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/sprites'));

^ reference a static directory where your svg sprite lives , that way you can avoid CORS issues. another way is to set the headers using ajax which another person above me has posted a link to css-tricks.

Upvotes: 0

revoke
revoke

Reputation: 559

As I wrote on davidwells.io (on this page is also his Javascript solution of the problem):

I had the same problem when I used external SVG file. I had to change configuration of virtual server and stop automatic redirecting SVG requests from HTTP to HTTPS. Other words: SVG file must be available on both of protocols. Now it working.

Upvotes: 1

Shikkediel
Shikkediel

Reputation: 5205

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.

Upvotes: 8

Related Questions