Is it possible to refer to an SVG defined somewhere else in the HTML document?

Question

I have huge dynamic lists that refer to a large amount of seperate (generated) SVGs (stylized acronyms).

I do not like to put the the generated SVGs in seperate files, because it will create hundreds/thousands of requests. Even with HTTP/2 somehow I would not like this solution. I have the feeling it creates unnecessary overhead.

Everytime inlining the full SVG I also do not like. It creates duplicate data for all the same acronyms (an item can appear multiple times at the page) and next to that it is a highly dynamic page: I have the feeling changing a background image is a lot faster then changing the DOM with the SVG.

So: is it possible to refer to a SVG defined somewhere else in the document?

I'm looking for something similar to:

<!-- generated by server -->
<div style="display: hidden;"> 
    <svg id="acronym-abc">
        [...]
    </svg>
    <svg id="acronym-xyz">
        [...]
    </svg>
</div>

<!-- generated by client -->
<ul>
    <li style="background: SVG(id=acronym-abc)"></li>
    <li style="background: SVG(id=acronym-xyz)"></li>
    <li style="background: SVG(id=acronym-abc)"></li>
    [...]
</ul>

UPDATE

It was not clear from my question, but I have the preference for something that I can use in combination with background-image and support for IE9. Otherwise I'll accept the answer from @web-tiki.

Another way could be not using them as background-images, but literally putting them inline with ` — Mr Lister, May 06 '19 at 09:33

web-tiki · Accepted Answer · 2019-05-06T09:52:45.843

4

You could use the <symbol> element and refer to each symbol with the <use> tag.
This won't work as a background image but it will allow you to only have on instance of each symbol. And you will also have control over the styles of the symbol each time you refer to it.

Here is an example :

<svg width="0" height="0">
  <symbol id="circle" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r=".7" />
  </symbol>
  <symbol id="square" viewBox="0 0 2 2">
    <path fill="darkorange" d="M.5 .5 H1.5 V1.5 H.5z" />
  </symbol>
</svg>
<p>
  <svg width="50" height="50"><use xlink:href="#circle" /></svg>
  <svg width="50" height="50"><use xlink:href="#circle" fill="teal" stroke="red" stroke-width=".1"/></svg>
  <svg width="50" height="50"><use xlink:href="#square" /></svg>
  <svg width="50" height="50"><use xlink:href="#square" fill-opacity=".5"/></svg>
</p>

More info on MDN :

The symbol element
The use tag

edited May 06 '19 at 09:52

answered May 06 '19 at 09:46

web-tiki

99,765
32
217
249

would it be possible to use this in combination with `background-image` ? – Dirk Boer May 06 '19 at 11:03
1

@DirkBoer No, this technique can't be combinated with `background-image` (yet) – web-tiki May 06 '19 at 12:05
1

Hi @web-tiki, thanks for your answer. I'm just awaiting a bit if anyone else know a good backgroundImage workaround otherwise I'll accept your answer! – Dirk Boer May 06 '19 at 12:15

Is it possible to refer to an SVG defined somewhere else in the HTML document?

1 Answers1