🎨 SVG精灵图生成器

中文EN

首页 › 工具 › SVG精灵图生成器

免费在线SVG精灵图生成器，将多个SVG图标合并为SVG Sprite，自动生成symbol引用和CSS类名，无需注册。 | 无需注册 · 数据绝不上传服务器

零依赖·可离线使用
📁

点击或拖拽上传SVG文件

支持 .svg 格式，可多选

常见问题

Q1: 什么是SVG精灵图？

SVG精灵图（SVG Sprite）是将多个SVG图标合并到一个SVG文件中的技术。每个图标用<symbol>元素包裹，通过<use>标签引用，减少HTTP请求，提高页面加载速度。

Q2: 如何在HTML中使用SVG精灵图？

将生成的SVG Sprite代码放在HTML的body开头，然后使用<svg><use href="#icon-name"/></svg>引用具体图标。也可以将Sprite保存为独立文件，通过<use href="sprite.svg#icon-name"/>引用。

Q3: SVG精灵图相比PNG精灵图有什么优势？

SVG精灵图支持无损缩放、文件体积更小、可通过CSS修改颜色和样式、支持动画。PNG精灵图是位图，放大后会模糊，且无法通过CSS修改颜色。

SVG精灵图生成器三步上手

  1. 填写相关等参数
  2. 点击计算按钮，立即获得结果
  3. 查看结果说明，理解每个数值的含义

SVG精灵图生成器的核心特点