代码合并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标签改为symbol，并且加上id

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

完工，接下来，只需要在需要使用的地方通过id引用即可，如下：

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

做完这些，我们已经可以使用合并后的svg了，但还有一些可以优化的地方

由于svg标签本身是占空间的，所以上面那一个svg也会在页面占据空间，这不是我们所希望的，所以我们要把它隐藏掉

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

此时，我们的svg已经很完备了，但是就是不够优雅，毕竟那么一大堆代码放在html里，我们只要用JS动态创建插入body中就好了。

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

作者：临安linan
链接：https://www.jianshu.com/p/b9d06b04982e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。