开发工具

SVG 图标 Sprite 合并工具

上传多个 SVG 图标文件后自动合并为一个 SVG Sprite 文件,生成 symbol 引用代码,支持下载。

SVGSprite图标

收藏工具

当前还没有选择收藏模式。

快捷操作

返回开发工具 浏览全部工具

你可以复制当前工具页链接,或在支持的设备上调用系统分享。

开发工具

SVG Sprite 合并器

点击或拖拽多个 SVG 文件到此处

已添加的图标

0 个

使用代码

上传 SVG 文件后生成使用代码

合并后的 SVG Sprite

 

使用场景

  • 合并项目中的 SVG 图标
  • 减少 HTTP 请求
  • 统一图标管理

如何使用

  1. 拖拽多个 SVG 文件
  2. 预览合并的图标
  3. 下载 Sprite 文件

示例输入输出

操作

上传 5 个 SVG 图标

输出

合并的 sprite.svg + 引用代码

FAQ

合并后怎么使用?

使用 <svg><use href="#icon-name" /></svg> 语法引用,或外部文件引用 sprite.svg#icon-name。

工具列表

相关推荐

你可以从这里继续打开相近场景的工具,减少重复搜索。

图片差异对比

图片差异对比 - 像素级高亮工具

可用

在浏览器本地对两张图片做像素级对比,用红色高亮差异区域并统计差异像素与占比,适合 UI 回归截图比对、设计稿版本核对和修改前后对比。

图片 对比 差异

像素标尺

像素标尺 - 屏幕尺寸与刻度工具

可用

在页面内绘制可切换方向的像素刻度标尺,可调长度与刻度间距,并显示窗口尺寸与设备像素比,适合核对 CSS 像素尺寸。

像素 标尺 测量