SVG Sprite 生成

怎么用

1. 把一个或多个完整的 SVG 文档粘贴进输入框，每个 svg 元素会变成一个 symbol。
2. 设置 id 前缀，供本身没有 id 属性的图标使用。
3. 若希望图标由 CSS 控制尺寸，保持勾选移除 width 与 height。
4. 点「生成 Sprite」查看代码，再复制模板里要用的引用片段。
5. 把 sprite 下载为 .svg 文件，内联在页面 body 顶部，或保存后按路径引用。

常见用法

• 打包图标集 —— 二十个图标只发一次请求，而不是二十次。
• 转换现有图标目录 —— 直接粘贴已有的文件，不必安装构建插件。
• 准备内联图标 —— sprite 代码放一次，页面任何位置都能引用其中的 symbol。
• 清理导出文件 —— 去掉固定的 width 与 height，让图标尺寸继承 CSS。

常见问题

问：id 是怎么确定的？ 答：工具会读取每个 svg 元素自带的 id 属性；如果没有 id，或者与前面的图标重名，就改用前缀加序号。

问：为什么 sprite 用 display: none 隐藏？ 答：sprite 只是一组 symbol 的素材库，本身不该绘制任何内容。内联并隐藏它，可以让页面上所有 use 元素解析到引用，同时不产生额外请求。

问：能引用外部文件里的 symbol 吗？ 答：可以。把下载的文件放进项目，用完整路径引用，例如 href="/assets/sprite.svg#check"。部分旧浏览器需要外部引用垫片，因此内联 sprite 的兼容性更好。