SVG Sprite Sheet Generator
指导
SVG Sprite Sheet Generator
合并多个 SVG 文件以创建单个精灵表，以实现高效的图标加载。通过拖放上传您的 SVG，在网格中预览它们，编辑符号 ID，并下载合并后的生产就绪精灵文件。获取用于外部引用、内联引用和 CSS 背景方法的用法代码片段。可以选择剥离填充和描边以实现 CSS 可着色图标，并移除编辑器元数据以减小文件大小。
如何使用
通过拖放将您的 SVG 图标文件上传到上传区域，或单击以进行浏览。每个 SVG 都会被解析并在预览网格中显示，并带有自动生成的符号 ID。通过单击来编辑任何符号 ID。切换优化选项以剥离填充/描边或移除元数据。单击“生成”可将所有图标合并为单个精灵表。下载合并的 SVG 文件或复制内联 HTML。使用生成的代码片段在您的项目中引用单个图标。
特征
- 拖放上传 – 一次性上传多个 SVG 文件，支持拖放或文件选择器
- 图标预览网格 – 在响应式网格中查看所有上传的图标，并附有标签
- 可编辑的符号 ID – 从文件名自动生成，可在合并前单击进行自定义
- 精灵表生成 – 使用保留 viewBox 的 symbol 元素将 SVG 合并为单个文件
- 用法代码片段 – 获取可直接使用的代码，用于外部引用、内联引用和 CSS 背景方法
- 填充/描边移除 – 剥离需要用 CSS 着色的图标的填充和描边属性
- 优化 – 移除注释、元数据和编辑器命名空间以减小文件大小
- 文件大小比较 – 查看单个文件与合并后文件的大小以及节省的空间
常问问题
-
什么是 SVG 精灵表，为什么我应该使用它？
SVG 精灵表是一个单一的 SVG 文件，其中包含多个定义为 symbol 元素的图标。您不需要加载 20 个单独的 SVG 文件（20 个 HTTP 请求），而是加载一个精灵文件，并使用 use 元素引用单个图标。这减少了 HTTP 请求，提高了页面加载性能，并简化了图标管理。每个 symbol 都保留其自己的 viewBox，因此图标会以正确的比例呈现。精灵表对于在多个页面上拥有大量图标的网站尤其有价值。
-
外部引用和内联引用精灵之间有什么区别？
外部引用使用单独的精灵 SVG 文件，并通过指向文件路径加上 symbol ID 的 href 来引用图标，例如 sprite.svg#icon-name。浏览器会加载精灵文件一次并将其缓存。内联引用将整个精灵 SVG 直接嵌入到 HTML 页面中（通常是隐藏的），并仅通过哈希和 ID 来引用图标。内联精灵无需额外的文件请求即可立即工作，但会增加 HTML 大小，并且无法单独缓存。外部精灵更适合多页面网站，而内联则适用于单页面应用程序。
-
为什么要从 SVG 图标中移除填充和描边？
从 SVG 图标中移除填充和描边属性可以让您完全通过 CSS 控制它们的颜色。这对于需要根据悬停、暗模式或不同的 UI 上下文更改颜色的图标系统至关重要。如果不移除原始属性，CSS 颜色更改可能无效，因为内联 SVG 属性的特异性高于 CSS 规则。此工具中的填充/描边移除选项会剥离这些属性，以便您可以使用 CSS 的 fill 和 stroke 属性或 currentColor 关键字来设置颜色。
-
如何从文件名生成符号 ID？
该工具通过移除 .svg 扩展名、转换为小写、用连字符替换空格和特殊字符，并移除连续的连字符，将每个文件名转换为 URL 安全的符号 ID。例如，“My Icon (v2).svg”会变成“my-icon-v2”。您可以在合并之前编辑任何生成的 ID。每个 ID 在精灵表中必须是唯一的，因为它在使用图标时充当引用标识符。像 icon-arrow-right 或 icon-close 这样的有意义的 ID 使您的代码比通用名称更具可读性。
