SVG优化器 - 在线优化和压缩SVG文件
通过删除元数据、优化路径和清理冗余代码来优化、压缩SVG文件。基于SVGO，100%客户端处理——数据不会发送到服务器。
常见问题
什么是SVG优化，为什么需要它？
SVG优化通过删除不必要的数据并应用无损变换来减少SVG文件的大小。Adobe Illustrator、Figma、Inkscape等设计工具在导出时会嵌入冗余的元数据、编辑器命名空间、注释和未优化的路径数据。优化SVG可以改善网页加载时间、减少带宽并提高Core Web Vitals得分。
如何使用此SVG优化工具？
提供SVG输入有两种方式：(1) 将SVG文件拖放到上传区域，或点击浏览文件。(2) 将SVG标记直接粘贴到代码输入区域。SVG加载后，工具会使用SVGO的默认插件预设自动优化。您可以通过调整精度滑块、启用多通道模式或切换单个插件来微调优化。
我的SVG数据安全吗？文件会上传到服务器吗？
您的SVG数据100%安全，永远不会离开浏览器。所有优化都使用直接在浏览器中运行的SVGO JavaScript库在客户端执行。没有SVG数据被传输到任何服务器，没有数据被收集，也没有跟踪发生。
原始大小和Gzip大小有什么区别？
原始大小是磁盘上的实际文件大小（字节）。Gzip大小是gzip压缩后的文件大小，这是Web服务器通过HTTP传输文件时通常使用的。Gzip大小更能代表实际的带宽影响。此工具同时显示两个指标，以便您做出明智的决策。
精度设置有什么作用？
精度设置（0-8）控制SVG中数值（特别是路径数据坐标和变换值）保留的小数位数。较低精度（1-2）生成更小的文件，但可能在复杂SVG中造成可见失真。默认精度3对大多数SVG来说是很好的平衡。
什么是多通道模式？
多通道模式多次运行SVGO优化管线，直到无法实现进一步的大小减少。多通道通常比单次通道多实现1-5%的额外减少。
哪些SVGO插件可以安全使用？
preset-default中的所有33个插件对大多数SVG都是安全的，默认情况下已启用。如果优化后的SVG看起来与原始不同，请尝试逐个禁用插件以找出原因。
代码示例
import { optimize } from 'svgo';
import { readFileSync, writeFileSync } from 'fs';
function optimizeSvg(svgString, options = {}) {
const { precision = 3, multipass = true, prettify = false } = options;
const result = optimize(svgString, {
multipass,
floatPrecision: precision,
js2svg: { pretty: prettify, indent: 2 },
plugins: ['preset-default'],
});
const originalSize = Buffer.byteLength(svgString, 'utf8');
const optimizedSize = Buffer.byteLength(result.data, 'utf8');
const reduction = Math.round((1 - optimizedSize / originalSize) * 100);
return { data: result.data, originalSize, optimizedSize, reduction };
}
const svg = readFileSync('icon.svg', 'utf8');
const result = optimizeSvg(svg, { precision: 2 });
console.log(`${result.originalSize} -> ${result.optimizedSize} (${result.reduction}% reduction)`);
writeFileSync('icon.min.svg', result.data);