I am dealing with extensive dynamic lists that are associated with a large number of individual (generated) SVGs, each representing stylized acronyms.
I prefer not to store the generated SVGs in separate files as it would result in numerous requests. Despite using HTTP/2, I find this solution unsatisfactory due to the unnecessary overhead it creates.
Inline inclusion of the full SVG every time is also not ideal. It leads to redundant data for identical acronyms (which may appear multiple times on the page) and given the high dynamism of the page, I believe changing a background image is more efficient than altering the DOM with an SVG.
Therefore, my query is whether it is feasible to reference an SVG defined elsewhere within the document?
I am seeking something akin 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
While I did not explicitly mention it earlier, I am specifically looking for a solution that can be used in conjunction with background-image and is compatible with IE9. Otherwise, I will consider the answer provided by @web-tiki.