快速、私密的 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 转换器将图形直接转换格式可能是更好的选择。