SVG 优化器：清理并压缩 SVG 文件而不破坏它们

Source: Dev.to

概览

从 Figma、Illustrator 或 Sketch 等工具导出的 SVG 往往包含不必要的元数据、注释以及未使用的定义，导致文件体积膨胀。

我构建了一个 基于浏览器的 SVG Optimizer，可以在 不改变视觉效果 的前提下清理并压缩 SVG 文件。

为什么要优化 SVG？

• 加快页面加载——更小的文件下载和解析更快
• 提升 Core Web Vitals 与 Lighthouse 分数
• 更干净、更易读的 SVG 代码
• 整体减小 JS/CSS 包体积

工作原理

1. 粘贴 SVG 代码、上传文件或加载示例。
2. 选择优化预设：
   • 默认
   • 最大优化
   • 低度优化
   • 手动
3. 点击 Optimize SVG。
4. 复制或下载优化后的结果。

功能特性

• 100 % 客户端（无需上传、无需服务器）
• 预设模式，快速完成优化
• 手动控制，适用于高级场景
• 小数精度控制（0–6）
• 前后体积对比
• 安全优化——保留 viewBox 与路径

非常适合在生产环境中准备 SVG，并提升前端性能。