工具95

优化 / 实用图像指南

如何压缩 SVG 文件

只有保留正确的细节,更轻量的矢量图才有意义。

要压缩 SVG,请上传文件或粘贴其标记,比较清理后的原始版本与优化版本,调整精度并选择“开始”。本指南使用一个真实的轨道图标,并检查导出的矢量图及其字节缩减情况。

跟随指南
已验证的源文件及其下载结果
处理前 原始紫色轨道 SVG 图标。

原始 985 字节的 SVG,在此比较中以 1,024 像素渲染。

处理后 优化后的 SVG,保留了相同显示尺寸的轨道图标。

实际 635 字节的 SVG,以相同的 1,024 像素显示分辨率渲染。

原始 985 字节的 SVG,在此比较中以 1,024 像素渲染。实际 635 字节的 SVG,以相同的 1,024 像素显示分辨率渲染。
广告
快速视频教程 How to compress an SVG with a preview Choose an SVG, review the comparison, adjust precision and download the optimized vector. 英语旁白 观看视频

How to compress an SVG with a preview

广告

按照此示例操作,然后将相同的控件应用于您自己的图像。 打开 SVG 压缩器.

01

上传静态 SVG 或粘贴标记

打开 SVG 压缩器并选择一个 SVG 文件或尝试示例。该示例是 svg-compressor.svg,一个 985 字节的轨道标记,具有 512 × 512 的 viewBox、渐变填充、标题和描述。当标记已在编辑器或剪贴板中时,请使用“粘贴 SVG”。

该工具最多可接受 20 个文件,每个文件最大 2 MB。它会解析完整的 SVG 文档并移除标准的 SVG 文档声明,而无需加载外部文件。格式错误的 XML、自定义实体声明和内部文档子集将被拒绝。非常复杂的文件也可能达到元素或处理时间限制。

此工作流程生成静态矢量图。脚本、事件处理程序、外部资源、动画和嵌入的栅格图像将被移除。原始预览已经过清理,因此不应将其视为源文件中所有功能的无限制渲染。

保留一份原始 SVG 的副本。交互式插图或包含照片的 SVG 与静态矢量图标的使用场景不同。

02

比较结果并设置十进制精度

两个预览面板显示了清理后的原始版本和优化后的结果。“原始”和“优化”旁边的尺寸以及字节摘要对比了源文件与最终输出。如果优化导致特定文件变大,它会报告增加,而不是承诺每次都能缩减。

打开“设置”并将“十进制精度”设置为 2 以进行示例。精度范围从 1 到 5,起始值为 3。较低的值可以简化数字几何形状,但可能会偏移精细曲线、小间隙或对齐的边缘。当预览丢失重要细节时,请提高精度。

此示例使用简单的几何形状,因此精度 2 可以保持其可识别的形状。其他具有复杂十进制坐标的 SVG 可能会有更多变化。查看优化后的 SVG 标记会显示将要下载的实际文本;它不是原始文件的单独表示。

在预期的显示尺寸和更大的视图下检查矢量图。细微的偏移在小缩略图中可能很难看清。

本指南中的示例

尝试一个示例:svg-compressor.svg,985 字节,512 × 512 viewBox。十进制精度 2;已启用保留可访问的标题/描述和缩短内部 ID;已禁用响应式尺寸和可读输出标记。已下载 SVG:635 字节。

源 SVG
985 字节
优化后的 SVG
635 字节
测量缩减量
35.5%
保留上下文
标题、描述和 512 × 512 viewBox
03

保留描述并考虑外部 ID

在示例中保持“保留可访问标题和描述”为启用状态。这会保留 SVG 的标题和描述,同时移除冗余的编辑器元数据并简化符合条件的标记。这些是不同类型的信息,不应被视为可互换的。

“缩短内部 ID”默认开启。优化器会更新 SVG 内的引用,但外部 CSS 或 JavaScript 可能仍依赖原始 ID。当文件是命名其元素的较大应用程序的一部分时,请关闭此选项,并在该上下文中测试完成的 SVG。

在示例中保持“响应式尺寸”和“可读输出标记”为关闭状态。响应式尺寸会在坐标 viewBox 可以提供可缩放尺寸时移除固定的宽度和高度。可读输出会添加缩进,这对于维护很有用,但会增加文本大小。

对于独立的图标文件,内部 ID 清理通常很简单。对于外部脚本驱动的图表,保留标识符可能比节省几个字节更重要。

04

下载并验证完成的矢量图

选择“开始”,然后选择“下载”。工作输出为 635 字节,而源文件为 985 字节:缩减了 35.5%。其标题和描述保持不变,显示的对比是从真实源文件和下载的 SVG 渲染出来的。

本文以 1,024 像素渲染两个矢量图以清晰展示结果;它们的逻辑坐标大小保持为 512 × 512。更大的预览不会向保存的 SVG 添加栅格内容。在替换现有的生产资产之前,请在目标页面中查看实际的矢量图。

单个文件下载为 SVG,并保留其原始基本名称。批量下载为一个 ZIP 文件,重复的文件名带有编号后缀。处理在浏览器中进行。如果您以后想尝试不同的优化设置,请保留原始源文件。

文件大小节省仅针对此示例进行测量。已经优化过的 SVG 可能改进甚微,甚至会略微变大。

实用详情

常见问题

优化后的 SVG 看起来会完全一样吗?

优化器旨在保留静态外观,但舍入和移除不支持的内容可能会改变文件。请比较预览并在您的项目中测试保存的 SVG。

十进制精度会改变什么?

它控制用于数字几何和路径数据的精度。较低的值可以减小文件大小,但可能会导致精细细节发生偏移。默认值为 3。

它会保留标题和描述吗?

是的,默认情况下会保留。请保持“保留可访问的标题和描述”处于启用状态,以保留这些 SVG 元素。

为什么脚本或栅格图像丢失了?

此工具创建静态矢量输出。在清理过程中,脚本、事件、外部资源、动画和嵌入的栅格图像会被有意移除。

我可以保留被 CSS 引用的 ID 吗?

当外部代码依赖于特定 ID 时,请关闭“缩短内部 ID”。在替换原始文件之前,请在目标页面中验证优化后的文件。

SVG 文件会被上传以进行优化吗?

不会。该工具在浏览器中执行解析和优化,并将结果下载到本地。

我可以上传带有 DOCTYPE 的 SVG 吗?

接受标准的 SVG 文档声明,并在不获取其外部标识符的情况下将其移除。自定义实体声明和内部文档子集将被拒绝。

轮到你了

使矢量图更轻量,并获得可供检查的结果。

尝试示例或使用您自己的文件,并在分享前检查结果。

打开 SVG 压缩器

图像详情

语言38

English العربية Français Italiano Deutsch Español Português Nederlands Русский Türkçe 日本語 中文 हिन्दी Bahasa Indonesia Bahasa Melayu 한국어 Tiếng Việt ไทย Polski Svenska Українська Norsk বাংলা Ελληνικά فارسی اردو Čeština Dansk Magyar Română Suomi Български Filipino ქართული Slovenčina Azərbaycanca עברית Slovenščina

选择您的语言。视频教程目前使用英语旁白。