SVG 优化器

关于此工具

SVG（可缩放矢量图形）文件使用 XML 标记描述形状、路径和文本。设计工具、CMS 导出和手写图标往往包含浏览器渲染同一画面所需的多余数据。SVG 优化是移除多余标记的过程——注释、编辑器元数据、冗余分组、路径坐标中不必要的精度以及未使用的属性——同时保持正常显示尺寸下视觉输出完全一致。 与 PNG 或 JPEG 等栅格格式不同，SVG 在压缩后仍可编辑且与分辨率无关。优化良好的图标可能从 40 KB 降至 6 KB 而不损失任何可见像素。优化对每次页面加载的 logo、界面图标、插图和 favicon 至关重要。 更小的文件意味着更快的页面加载、更低的移动网络带宽消耗以及更好的 Core Web Vitals 分数。搜索引擎奖励快速页面，用户也会注意到图标延迟出现或阻塞渲染的情况。优化后的 SVG 能更干净地嵌入 HTML、React 组件和电子邮件模板，在这些场景中臃肿的标记可能破坏解析器或增大 bundle 体积。 生产网站在 CSS 背景、内联 <svg> 标签或 img 元素中引用 SVG 图标。这些文件中的每一 KB 都会影响关键渲染路径，尤其是首屏出现多个图标时。移除空白、合并 transform 和剥离 doctype 声明可在不改动 CSS 或 JavaScript 的情况下减少传输大小。若通过 link rel="icon" type="image/svg+xml" 提供 SVG favicon，浏览器会积极缓存——精简文件在品牌更新时刷新更快。 React 项目常将 SVG 作为组件或 URL 导入。当 loader 将其内联为字符串时，臃肿的源文件会增加 JavaScript bundle 的解析时间。在将图标加入组件库之前，先通过优化器处理，以保持 tree-shaking 和 code splitting 有效。将优化后的标记粘贴到 .svg 文件或 SVGR 流程时，请确认 viewBox 值保留——React 应用依赖 viewBox 实现响应式缩放。 现代浏览器支持从文档 head 链接的 SVG favicon。文件足够小且有效时，它们在 Retina 标签页和固定快捷方式上清晰缩放。SVG favicon 应为正方形、使用简单调色板，并避免外部引用或脚本以确保安全。优化后，如需支持旧版 Windows 外壳或期望栅格格式的社交爬虫，可转换为 ICO 或 PNG。优化后的 SVG favicon 是整个 favicon 包工作流的优秀主文件。 设计师导出 SVG 时常见嵌入栅格图像、路径小数精度过高、重复重叠形状以及本可简化为属性的 style 块。Illustrator 有时将命名图层添加为 group 元素，Figma 导出包含 xmlns 属性和六位小数的分数坐标。缺少 viewBox 的 width 和 height 会破坏响应式布局。启用的隐藏图层和裁剪蒙版会导出仍计入文件大小的不可见几何体。Sketch、Adobe XD 或 Inkscape 的元数据块会增加浏览器不读取的 KB 数。 在 Figma 中，使用 Copy as SVG 或在图标使用转换效果差的描边时以 Outline stroke 导出。Figma 文件常在每个分组上包含 fill-rule 和 transform 矩阵；优化器会在安全时合并相邻路径。在 Illustrator 中选择 Minify 或 Responsive SVG 导出，禁用不必要的字体嵌入，并在导出前扩展外观。 导出后，将标记粘贴到此基于浏览器的优化器中。处理在本地进行——您的品牌资产绝不会上传到服务器。下载清理后的文件，或将结果直接复制到仓库、CMS 或 favicon 生成器流程。需要多尺寸生产包时，请配合我们的 SVG 转 ICO 转换器、SVG 转 PNG 转换器或 Favicon 生成器使用。

常见问题