svg合并

假如页面有多个svg图标要加载，多次加载不利，可将多个svg合并为一个加载

如下有两个svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 482 504.5">
中间是svg的具体内容
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 482 504.5">
中间是svg的具体内容
</svg>

将他们的前后缀改为symbol，并添加id，结果如下

<symbol id="icon-pre" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 482 504.5">
中间是svg的具体内容
</symbol >

<symbol id="icon-next" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 482 504.5">
中间是svg的具体内容
</symbol >

并通过如下方式引用

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