Inline SVG with use tag stopped working with recent browsers

I have this webpage on hold for about an year now that I decided to finally finish. To my surprise the code is now showing differently than before. I narrowed it down to using inline SVG with the <use> tag that simply stopped working with the latest browsers. I tried with latest version of Firefox (68.0.1) and Opera. Firefox is the main browser I was testing with, but plan on testing with others when I'm done (of course).

!!EDIT!! I was actually using an identifier to reference a symbol inside the svg file but it seems even without that it stopped working, so let's start by that (example follows...).

 <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    
    </head>
    <body>
     <div>
    
    TEST TEXT
    
     <svg>
      <use href="imgs.svg#tst"></use>
     </svg>
             
     </div>
    </body>
    </html>
    
    
    <!-- THE ACTUAL SVG FILE CALLED imgs.svg -->
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE svg>
    <svg xmlns="http://www.w3.org/2000/svg">
     <symbol id="tst" viewBox="0 0 100 100">
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"  fill="yellow" />
    </symbol>         
   </svg>

Solution

You're running this from a file system and not from a web-server. That's the problem.

This is due to the fixing of a security vulnerability recently CVE-2015-7186

Running from a filesystem is now much more restricted, basically you can no longer reference one file from another. We're discussing what to do about this in bug 1565509, but as we currently match Safari I'm not sure whether we'll change to match Chrome or Chrome will change to match us.

In the meantime, use a web server or convert the referenced file to a data uri and embed it in the parent document.