using SVG `use` icons (external reference) does not show icons in chrome when viewing html file locally

Question

I am trying to use SVG icons as described here https://css-tricks.com/svg-use-with-external-reference-take-2/

(here is how it looks)

<!-- EXTERNAL reference -->
<svg>
  <use xlink:href="sprite.svg#icon-1"></use>
</svg>

it works for me without any problem except if I open html file locally in Chrome.

in dev tools it shows this error:

Unsafe attempt to load URL file:///D:/path/to/file/icon-defs.svg#icon-rocket from frame with URL file:///D:/path/to/file/index.html. 'file:' URLs are treated as unique security origins.

is there any way around it? most of the time i use firefox so it is not a big problem for me but i am building documentation in html format that would be used by other users...

Answer 1

There is no real way to bypass the file: safety thing.

But you could always embed the SVG directly into your HTML file and just <use xlink:href="#icon-1" /> - keep in mind that it will increase the size of your HTML, but since it's for documentation rather than being downloaded repeatedly over the web, this may be acceptable.

In any case, be sure to optimise your SVG files. I've found this SVG optimiser to be outstandingly effective.