слияние кода svg

Мы часто используем svg, но если вводится слишком много svg, будет лучше интегрировать их в один график svg, что может уменьшить количество запросов и обеспечить одновременную загрузку нескольких значков (чтобы избежать разница в порядке загрузки svg и вызывает плохой опыт ОК)
Итак, как нам объединить svg?
На самом деле, есть несколько способов, вы можете найти готовые инструменты в Интернете или использовать код для слияния.
Как слиться с кодом?
Сначала введите два svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
// ...
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
// ...
</svg>

Затем измените тег svg на символ и добавьте идентификатор

<?xml version="1.0" encoding="UTF-8"?>
<symbol  id="icon-pre" width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
// ...
</symbol>

<?xml version="1.0" encoding="UTF-8"?>
<symbol id="icon-next" width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
// ...
</symbol>

Затем, поскольку он должен быть объединен, оберните тег svg в самый внешний слой.

<svg>
  <?xml version="1.0" encoding="UTF-8"?>
  <symbol  id="icon-pre" width="120px" height="120px" viewBox="0 0 120 120" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  // ...
  </symbol>

  <?xml version="1.0" encoding="UTF-8"?>
  <symbol id="icon-next" width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  // ...
  </symbol>
</svg>

Готово, далее вам нужно только обратиться к нему по идентификатору, где он должен использоваться, следующим образом:

<svg>
  <use xlink:href="#icon-pre"></use>
</svg>

После этого мы уже можем использовать объединенный svg, но есть еще места, которые можно оптимизировать.Поскольку

сам тег svg занимает место, указанный выше svg также будет занимать место на странице, а это не то, что нам нужно. поэтому мы собираемся скрыть это

<svg style="display: none" >
// ...
</svg>

На этом наш svg готов, но он недостаточно элегантен, ведь в html помещается много кода, нам нужно только использовать JS для его динамического создания и вставки в тело.

let svgWrapper = document.createElement('div')
svgWrapper.style.display = "none"
document.body.appendChild(svgWrapper)
svgWrapper.innerHTML = `<svg>
  // ...略略略
</svg>`

Автор: Linan linan
Ссылка: https://www.jianshu.com/p/b9d06b04982e
Источник: Jianshu
Авторские права принадлежат автору. Для коммерческой перепечатки просьба обращаться к автору за авторизацией, для некоммерческой перепечатки просьба указывать источник.