svg not displayed in local

Question

I am currently using an svg on an html page which is running on my local machine, and not on a server. The image not display :

<svg aria-hidden="true" class="slds-icon slds-icon-standard-lead slds-icon--small">
        <use xlink:href="SLDS202/assets/icons/standard-sprite/svg/symbols.svg#lead"></use>
</svg>

The path are right. On local machine i have the impression that we can't run the use part. Is that right? I didn't see any limitations by being on a server and been on a local machine.

This code run well on local :

 <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
     <rect width="100%" height="100%" fill="red" />
     <circle cx="150" cy="100" r="80" fill="green" />
     <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
  </svg>

When inspecting the console, i am getting this error :

  Unsafe attempt to load URL file:///C:/work/References/SLDS/SLDS202/assets/icons/utility-sprite/svg/symbols.svg#filterList from frame with URL file:///C:/work/References/SLDS/axa-hk-gi-demo.html.
 'file:' URLs are treated as unique security origins.

Answer 1

Quoting @RobertLongson's comment which should be an answer:

If you're using Chrome it's security model prevents local files referring to other files in different directories. Firefox's security model allows local files to refer to other local files provided that the referenced file is in the same directory or a subdirectory of the referrer.