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...

Other than using a local server (PHP has one built-in as of 5.4, run `php -S localhost:8000`), I doubt it. — Niet the Dark Absol, Jan 31 '16 at 15:53
@akauppi well, i didn't even finish the product yet, but i was thinking about just recommending to use firefox... — Marek, Jul 28 '16 at 10:00

score 2 · Answer 1 · answered Jan 31 '16 at 16:35

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.

score 0 · Answer 2 · answered Jan 31 '16 at 16:11

0

Start Chrome with the command line option --disable-web-security

be careful not to surf the web generally with Chrome when run with this flag.

answered Jan 31 '16 at 16:11

Robert Longson

102,136
21
218
211

This doesn't seem terribly practical with "building documentation in html format" – Niet the Dark Absol Jan 31 '16 at 16:34
@NiettheDarkAbsol the alternative would be to use a different UA such as Firefox or Internet Explorer. – Robert Longson Jan 31 '16 at 17:21
Which, again, is not practical, assuming this is documentation for a project that will be installed on a user's computer. With Chrome's widespread use, lacking basic support for it (and instead causing errors in it) would be a bad idea. – Niet the Dark Absol Jan 31 '16 at 17:38
At the moment it is: https://stackoverflow.com/a/3177718/1908192 – Velda May 06 '20 at 20:12

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

2 Answers2