首页›文本·编码·数据›SVG Sprite 图标合并

SVG Sprite 图标合并

把一组独立 SVG 图标合并进单个文件,通过 symbol 与 id 命名组织,页面用 use 引用即可复用,减少图标请求数量。

永久免费本地计算 · 零上传

🔒 全程在浏览器内计算,输入内容不会离开您的设备。

怎么用

  1. 导入多个 SVG 图标文件
  2. 为每个图标设置唯一 id 名称
  3. 生成合并后的 sprite 文件
  4. 在页面中用 use 按需引用图标

典型场景

整站图标合并以降低请求
统一管理按钮与状态图标集合
构建可复用的 SVG 图标库

常见问题

sprite 有什么好处?

一次加载即可复用全部图标,减少 HTTP 请求并便于集中维护。

引用时要注意什么?

每个 symbol 的 id 必须唯一,页面通过对应 id 精确取用。

单个图标能改尺寸吗?

SVG 矢量特性允许在引用处缩放而不失真。

相关工具