跳到正文
SPCXTools

SVG 优化器

在浏览器中即时压缩和清理 SVG 文件,减小文件体积,提升网站性能。

本地运行——文件不会离开你的设备

正在加载工具…

如何使用SVG 优化器

  1. 1将 SVG 代码粘贴到输入框中,或点击“打开文件”从您的设备加载 .svg 文档。
  2. 2根据您的需求调整优化设置,如浮点精度、多次优化和移除尺寸属性。
  3. 3查看优化后的代码、节省的文件体积以及优化前后的视觉对比,以确保图像质量。
  4. 4将精简后的 SVG 代码复制到剪贴板,或将其作为优化后的新文件下载。

快速、私密的 SVG 优化工具

可缩放矢量图形 (SVG) 是网页中呈现清晰、无损缩放的图标和插图的标准格式。然而,从设计工具中导出的 SVG 文件通常并未针对生产环境进行优化。这款 SVG 压缩优化工具能帮您瞬间清理矢量图形,剔除冗余代码,在不损失视觉质量的前提下大幅减小文件体积。

由于本工具完全在您的浏览器中运行,您的图形绝不会被上传到服务器。您可以放心压缩包含专属 Logo、未发布产品设计或机密图表的 SVG 文件。处理过程瞬间完成,不仅能实时显示节省的文件大小,还提供压缩前后的视觉对比,确保您的图形完美无损。

为什么要压缩 SVG 文件

与存储像素数据的位图(如 JPEG 或 PNG)不同,SVG 本质上是包含图形绘制数学指令的 XML 文本文件。矢量编辑器在生成这些文件时,通常会附带大量浏览器渲染图像时根本不需要的冗余数据。

SVG 文件体积过大的常见原因包括:

  • 编辑器元数据: 创建该文件的软件专属的标签和属性,仅供编辑时使用。
  • 注释和空元素: 开发者注释、空分组(<g>)以及对最终视觉效果没有作用的隐藏图层。
  • 精度过高: 带有六位或更多小数的路径坐标(如 14.123456),会占用不必要的字节空间。
  • 默认属性: 与浏览器默认行为一致、无需显式声明的样式和属性。

通过使用 SVG 压缩工具,您可以剔除这些无用的隐藏代码。减小 SVG 文件体积不仅能加快网页加载速度、节省带宽,还能提升网站的整体性能和 SEO 排名。

如何在线压缩 SVG

本工具提供多种自定义选项,让您对优化过程进行精细控制。您可以根据最终图形的用途调整这些设置,在文件大小和代码可读性之间取得完美平衡。

浮点精度
矢量路径是通过坐标绘制的。设计软件导出的坐标通常精度极高,会生成长串数字。通过降低浮点精度(即小数位数),您可以大幅减少文件中的字符数。对于网页图标,精度设为 1 或 2 通常就足够了。如果在预览中发现曲线出现锯齿或形状发生偏移,只需调高精度滑块,直到图像显示正常即可。

多次优化
优化通常是一个层层递进的过程。移除某个多余元素后,其父元素可能会变为空,从而也可以被一并移除。勾选“多次优化”后,优化器会反复执行清理程序,直到文件大小无法再缩减为止,从而确保输出体积最小的文件。

移除尺寸
默认情况下,许多导出的 SVG 会带有写死的 width 和 height 属性(例如 width="500px")。虽然这固定了图像尺寸,但不利于响应式网页设计。勾选“移除尺寸”将删除这些属性,同时保留 viewBox。这样 SVG 就能根据父容器的 CSS 自适应缩放,更方便地应用于现代网页布局中。

代码美化
如果您追求极致的最小文件体积,请不要勾选此项,工具将输出一行紧凑的代码。但如果您打算对清理后的 SVG 进行手动编辑、制作动画或直接嵌入到 HTML 文档中,勾选“代码美化”可以为输出的代码添加整齐的缩进和换行。

矢量图形最佳实践

优化 SVG 只是构建快速、无障碍网站的步骤之一。在处理矢量图形时,请考虑它们的应用方式。如果将 SVG 直接内联嵌入 HTML 中,压缩 SVG 对于保持较小的 HTML 文档体积至关重要。为了获得最佳性能,您还可以使用 HTML 压缩工具 或 CSS 压缩工具 来处理整个页面。

优化后请务必检查视觉预览。虽然大多数 SVG 都能完美压缩,但带有复杂渐变或精确剪切路径的高复杂度插图可能需要更高的浮点精度,以保持其原始外观。内置的优化前后对比视图让您在下载压缩文件前,可以轻松发现任何意外的视觉变化。

最后,虽然 SVG 非常适合徽标、图标和扁平化插图,但它们并不适合复杂的照片。如果您的 SVG 主要由嵌入的位图(例如 base64 编码的 JPEG)组成,那么优化效果将微乎其微。在这种情况下,使用 SVG 转 PNG 转换器将图形直接转换格式可能是更好的选择。

常见问题

这款 SVG 压缩工具是如何减小文件大小的?
它会清理矢量图形编辑器(如 Illustrator 或 Inkscape)生成的冗余数据,例如编辑器元数据、注释、隐藏元素和空分组。它还会将坐标值四舍五入到指定的精度,从而节省文件空间。
“Multipass”(多次优化)选项有什么作用?
“Multipass”会多次执行优化过程。某些优化操作会为进一步压缩释放空间,因此反复运行直到文件大小不再减小,通常能达到最佳的压缩效果。
为什么要移除宽高尺寸?
移除硬编码的 width 和 height 属性(同时保留 viewBox)能让 SVG 变成响应式图形。这样图像就能通过 CSS 自然缩放以适应容器大小,非常适合现代网页设计。
什么是浮点精度(Float precision)?
浮点精度决定了路径坐标保留的小数位数。较低的数值(如 1 或 2)能大幅减小文件体积,但可能会使复杂曲线的形状发生微小改变。如果您的 SVG 在压缩后出现变形,请尝试调高精度。
我的 SVG 文件会被上传到服务器吗?
不会。整个压缩优化过程完全依赖 JavaScript 在您的浏览器本地完成。您的文件和代码绝不会被上传,既保证了绝对的隐私安全,又实现了极快的处理速度。
“美化输出”选项有什么作用?
默认情况下,代码压缩工具会移除所有换行符和空格,使文件体积尽可能小。勾选“美化输出”会使用缩进格式化输出内容,使代码保持良好的可读性,方便您手动编辑。