代码合并svg

最新推荐文章于 2024-08-28 09:01:51 发布

雪落无痕588

最新推荐文章于 2024-08-28 09:01:51 发布

阅读量1.9k

点赞数 1

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/maxue20161025/article/details/128102328

版权

本文介绍了如何将多个SVG图标合并成一个文件，以减少HTTP请求并确保图标同步加载。通过将SVG转换为symbol标签并添加ID，然后包裹在一个外部SVG标签中，可以实现图标合并。进一步的优化包括隐藏SVG元素以节省空间，以及使用JavaScript动态插入SVG代码，保持HTML的整洁。

摘要由CSDN通过智能技术生成

我们常常会使用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