Можно ли ссылаться на SVG, определенный где-то еще в документе HTML?

Question

У меня есть огромные динамические списки, которые ссылаются на большое количество отдельных (сгенерированных) SVG (стилизованных сокращений).

Я не люблю помещать сгенерированные SVG в отдельные файлы, потому что это создаст сотни/ тысячи запросов.Даже с HTTP / 2 как-то мне не понравилось бы это решение.У меня такое ощущение, что это создает ненужные накладные расходы.

Каждый раз, когда я включаю полный SVG, я тоже не люблю.Он создает дубликаты данных для всех одних и тех же сокращений (элемент может появляться несколько раз на странице), и рядом с этим это очень динамичная страница: я чувствую, что смена фонового изображения происходит намного быстрее, чем смена DOM с помощью SVG.

Итак: можно ли ссылаться на SVG, определенный где-то еще в документе?

Я ищу что-то похожее на:

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

ОБНОВЛЕНИЕ

Из моего вопроса было не ясно, но у меня есть предпочтение чему-то, что я могу использовать в сочетании с background-image и поддержкой IE9.В противном случае я приму ответ от @ web-tiki.

Answer 1

Вы можете использовать элемент <symbol> и ссылаться на каждый символ с тегом <use>.
Это не будет работать как фоновое изображение, но позволит вам иметь только один экземпляр каждого символа.И вы также будете контролировать стили символа каждый раз, когда обращаетесь к нему.

Вот пример:

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

Подробнее о MDN:

• Элемент символа
• Тег use