Why is SVG not shown when imported from sprite?

Question

I want to use a sprite for svg icons. The test svg sprite-sheet looks like this:

sprites.svg

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>

    <symbol id="orange" viewBox="0 0 140 140">
      <path fill="orange" d="M70 0A70 70 0 1071 0Z"/>
    </symbol>

    <symbol id="blue" viewBox="0 0 140 140">
      <path fill="steelblue" d="M70 0A70 70 0 1071 0Z"/>
    </symbol>

  </defs>
</svg>

The corresponding html file where I try to display the symbol #blue looks like that:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>SVG Test</title>
</head>

<body>

    <svg><use href="sprites.svg#blue" /></svg>

</body>
</html>

Unfortunately, the browser does not display the icon. In Firefox, the developer console gets me the following information:

<body>
  <svg>
    <use href="sprites.svg#blue">
      #shadow-root (closed)
    </use>
  </svg>
</body>

Google Chrome doesn't say anything at all.

So all I have are two simple files, one html index file and one svg sprites file. But although I've read a lot about svgs and sprites and how to use them, I'm still not able to display a simple icon on a simple web page.

Can anybody please tell me what big thing I am missing? Am I that stupid or is SVG just another great idea but practically useless unless you'll have a degree in rocket science?

Many thanks for any information

You can use a more modern approach to include icons as Web Components, see the answer at: https://stackoverflow.com/questions/76543598/css-class-name-in-svg-style-is-global/76545459# — Danny '365CSI' Engelman, Jun 24 '23 at 10:44
Does this mean to use JavaScript for displaying icons? Thanks for the input, but I don't want to use JS to just display a simple icon. — Slevin, Jun 24 '23 at 11:01
Yes, it needs JS. With Web Components you get all functionality in one Component. Otherwise you will have SVG, HTML and JS (I presume you icons need interactivity) in separate locations. — Danny '365CSI' Engelman, Jun 24 '23 at 11:09
@RobertLongson unfortunately this doesn't seem to make any difference. Still the same problem. Or do I missunderstand you: I've removed the `id="ice"` from the symbol tag and put it into the path tag, but as mentioned without any success. — Slevin, Jun 24 '23 at 12:03
Yes, I've really had this typo, thanks for that ;) - but still won't work :( ... [i'm beginning to think i'm just too stupid for this world] — Slevin, Jun 24 '23 at 12:11
Is your code running from a web server or just from the file system? — chrwahl, Jun 24 '23 at 14:06
The site is delivered by a local server, otherwise I would get security errors caused by CORS restrictions. I've tried three different servers, all with the same result. — Slevin, Jun 24 '23 at 14:11
As commented by @chrwahl: Are you **opening your .html** on a server? (in VS Code you could use Liveserver) If you open your html as a file you won't see external symbols. The sample svg should definitely work. See [plnkr example](https://plnkr.co/edit/WjdNpNz0KllwPBoE?open=lib%2Fscript.js&preview). If the simplified example works on your local server, there's probably a typo in your actual sprite.svg. Can you share this file? — herrstrietzel, Jun 24 '23 at 15:33
Yes, I'm opening the site by accessing a local server: localhost:8080. The most powerful production server I'm using is Tomcat. Can you confirm that this examples provided with the question work in your case and thus the issue is somehow on my side? — Slevin, Jun 24 '23 at 15:46
Well, I don't know what to say. I've tried three servers, none worked. I now spinned up a new Tomcat environment, it woks. I'm really out of glue... So svg is something that doesn't work with any server but with some under some circumstances? — Slevin, Jun 24 '23 at 15:54
That does it make really hard to get into svg. I've read litterally hours of hours about svg, sprites and how to use them. What you can do, how to insert them into pseudoclasses, as background image and all the limitations to gain access to the properties. But never, really NEVER I've read anything about the svg limitation on some servers. — Slevin, Jun 24 '23 at 15:57
I knew about the CORS thing, but in this case the browser tells you via dev console that the svg couldn't be loaded. To not load the file by silently dismissing and not giving any feedback at all is in my opinion the worst thing to handle this situation. And btw, not a single tutorial on the first google pages mentions this fact. — Slevin, Jun 24 '23 at 16:04
Anyways, MANY THANKS to you all for being patient with me and helping me out of this loop. Something learned today the timely way... :) — Slevin, Jun 24 '23 at 16:06
Loading an SVG from a server couldn't be hard, but if the server somehow doesn't recognize the document is an SVG document that can be an issue. What is the value of Content-Type header in the response (browser dev tools)? That could be the issue. — chrwahl, Jun 24 '23 at 16:19
The response content type header (served by one of the not properly working servers) is `Content-Type application/octet-stream`. Don't know if this is the correct type for svg? — Slevin, Jun 24 '23 at 16:29
@chrwahl I'd appreciate if you could add the server/header information into your answer since I think, that I'm not the only one ever to face this particular problem. Also, I then can mark your answer as the one that helped giving me back my sleep ;). Many thanks. — Slevin, Jun 24 '23 at 19:11
The correct type for SVG is Content-Type application/xml+svg (though any XML type would be OK e.g. application/xml) and that's your real problem, that your web server is not configured correctly. — Robert Longson, Jun 24 '23 at 19:25

score 0 · Answer 1 · answered Jun 24 '23 at 13:11

What happens if you give the SVG element in your HTML page a width and/or height?

In this example I made a simple path. So, the document looks like this:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="fish" viewBox="0 0 140 140">
      <path fill="orange" d="M70 0A70 70 0 1071 0Z"/>
    </symbol>
    <symbol id="ice" viewBox="0 0 140 140">
      <path fill="steelblue" d="M70 0A70 70 0 1071 0Z"/>
    </symbol>
  </defs>
</svg>

And then I turn it into a data URI, so that is works here on ST:

<svg width="100" height="100">
  <use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHN5bWJvbCBpZD0iZmlzaCIgdmlld0JveD0iMCAwIDE0MCAxNDAiPgogICAgICA8cGF0aCBmaWxsPSJvcmFuZ2UiIGQ9Ik03MCAwQTcwIDcwIDAgMTA3MSAwWiIvPgogICAgPC9zeW1ib2w+CiAgICA8c3ltYm9sIGlkPSJpY2UiIHZpZXdCb3g9IjAgMCAxNDAgMTQwIj4KICAgICAgPHBhdGggZmlsbD0ic3RlZWxibHVlIiBkPSJNNzAgMEE3MCA3MCAwIDEwNzEgMFoiLz4KICAgIDwvc3ltYm9sPgogIDwvZGVmcz4KPC9zdmc+CgoK#fish" />
</svg>

<svg width="100" height="100">
  <use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHN5bWJvbCBpZD0iZmlzaCIgdmlld0JveD0iMCAwIDE0MCAxNDAiPgogICAgICA8cGF0aCBmaWxsPSJvcmFuZ2UiIGQ9Ik03MCAwQTcwIDcwIDAgMTA3MSAwWiIvPgogICAgPC9zeW1ib2w+CiAgICA8c3ltYm9sIGlkPSJpY2UiIHZpZXdCb3g9IjAgMCAxNDAgMTQwIj4KICAgICAgPHBhdGggZmlsbD0ic3RlZWxibHVlIiBkPSJNNzAgMEE3MCA3MCAwIDEwNzEgMFoiLz4KICAgIDwvc3ltYm9sPgogIDwvZGVmcz4KPC9zdmc+CgoK#ice" />
</svg>

Thank you for your help. Unfortunately adding height and width doesn't fix the issue. I've tried that before in many variations and read about, that if you omit these parameter the viewbox width and height would be taken instead. The browser is demanding the appropriate space in the DOM as the dev tools show, but the problem is something with the import of the svg respectively the symbol. Inline svgs work perfectly, but importing them from files seems to be a huge problem. — Slevin, Jun 24 '23 at 13:24
Also thanks for the example, I update the question with your circles to make the snippets bit simpler ;) — Slevin, Jun 24 '23 at 13:26

Why is SVG not shown when imported from sprite?

1 Answers1