掌握 Tiny SVG 的优化设置面板

Tiny SVG 的优化设置面板让您完全控制 SVG 文件的优化方式。在这份综合指南中,我们将探索每个设置和功能,帮助您充分利用 SVG 优化工作流程。

了解设置面板#

设置面板分为三个主要部分:

全局设置 - 控制整体优化行为
功能特性 - 切换 45+ 个独立的 SVGO 插件
导出选项 - 配置 PNG/JPEG 导出尺寸

让我们深入了解每个部分。

全局设置#

显示原始文件#

用途: 并排显示原始和优化后的 SVG

何时使用:

在优化前后比较视觉差异
验证优化不会破坏您的 SVG
批量处理期间的质量保证

// 启用后,您将看到:
// 原始: 12.5 KB | 优化后: 4.2 KB (-66.4%)

提示: 压缩完成后,面板会自动切换到"优化"标签,但您可以切换此设置以保持两个视图可见。

比较 Gzip 压缩后大小#

用途: 显示 gzip 压缩后的大小而不是原始文件大小

为什么重要: Web 服务器通常使用 gzip 压缩提供文件,因此这能让您更准确地了解实际文件大小。

// 未启用 gzip:
原始: 12.5 KB → 优化后: 4.2 KB
 
// 启用 gzip:
原始: 3.8 KB → 优化后: 1.9 KB

最佳实践: 始终检查 gzip 压缩后的大小用于生产部署,因为它们更能代表通过 HTTP 传输的实际大小。

美化标记#

用途: 使用适当的缩进格式化优化后的 SVG 代码

权衡:

✅ 启用: 更易读,更容易调试 (文件大小 +5-10%)
❌ 禁用: 已压缩,文件更小,更难阅读

<!-- 美化后 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
</svg>
 
<!-- 压缩后 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/></svg>

建议: 开发/调试时启用,生产构建时禁用。

多次优化#

用途: 多次运行优化流程直到无法进一步改进

工作原理: 某些优化可以启用其他优化。例如,移除空组可能会使父组可折叠。

// 单次优化: 12.5 KB → 5.1 KB (-59.2%)
// 多次优化: 12.5 KB → 4.2 KB (-66.4%)

性能说明: 对于复杂的 SVG,多次优化可能需要 2-3 倍的时间,但文件大小的节省通常是值得的。

最佳实践: 保持启用,除非您正在优化数百个文件并需要更快的处理速度。

数字精度#

用途: 控制数值的小数精度 (0-10)

默认值: 2

示例:

<!-- 精度: 0 -->
<circle cx="12" cy="12" r="5"/>
 
<!-- 精度: 2 (默认) -->
<circle cx="12.35" cy="12.47" r="5.18"/>
 
<!-- 精度: 5 -->
<circle cx="12.34567" cy="12.47234" r="5.18392"/>

权衡:

较低精度 (0-1): 文件更小,复杂路径可能有视觉差异
中等精度 (2-3): 平衡,适合大多数图标和插图
较高精度 (4-10): 文件更大,保留复杂细节

建议: 图标使用 2,详细插图使用 3-4,技术图表使用 5+。

变换精度#

用途: 控制变换操作(旋转、缩放、平移)的小数精度

默认值: 4

为什么与数字精度分开?: 变换对舍入误差更敏感。旋转角度的小误差可能导致明显的变形。

<!-- 变换精度: 2 -->
<g transform="translate(12.35, 8.47) rotate(45.12)">
 
<!-- 变换精度: 4 (默认) -->
<g transform="translate(12.3456, 8.4712) rotate(45.1234)">

建议: 保持在 4,除非您有非常简单的变换(使用 2)或需要亚像素精度(使用 5-6)。

功能开关 (SVGO 插件)#

Tiny SVG 提供对 45+ 个 SVGO 插件的访问。以下是最重要的插件:

基本插件 (通常启用)#

removeDoctype

移除浏览器在内联 SVG 中不需要的 <!DOCTYPE> 声明。

<!-- 之前 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "...">
<svg>...</svg>
 
<!-- 之后 -->
<svg>...</svg>

节省: ~100-200 字节

removeComments

移除所有 XML 注释。

<!-- 之前 -->
<!-- Created with Figma -->
<!-- Icon: Home -->
<svg>...</svg>
 
<!-- 之后 -->
<svg>...</svg>

何时禁用: 如果需要保留署名注释或条件注释。

removeMetadata

移除包含编辑器信息的 <metadata> 标签。

<!-- 之前 -->
<svg>
  <metadata>
    <rdf:RDF>...</rdf:RDF>
  </metadata>
  <path d="..."/>
</svg>
 
<!-- 之后 -->
<svg>
  <path d="..."/>
</svg>

节省: 可以从 Adobe Illustrator 导出的文件中移除数千字节。

cleanupIds

移除或压缩未使用的 ID 和引用。

<!-- 之前 -->
<defs>
  <linearGradient id="gradient-unused-1234567890">
  <linearGradient id="gradient-used-9876543210">
</defs>
<rect fill="url(#gradient-used-9876543210)"/>
 
<!-- 之后 -->
<defs>
  <linearGradient id="a">
</defs>
<rect fill="url(#a)"/>

何时禁用: 如果您在一个 HTML 页面中嵌入多个 SVG 并需要防止 ID 冲突。

convertPathData

优化路径命令和坐标。

<!-- 之前 -->
<path d="M 10.000 10.000 L 20.000 10.000 L 20.000 20.000 Z"/>
 
<!-- 之后 -->
<path d="M10 10h10v10z"/>

节省: 典型情况下路径数据减少 30-50%。

何时禁用: 从不(除非您正在调试路径问题)。

情境插件#

removeViewBox

移除 viewBox 属性。

<!-- 之前 -->
<svg width="24" height="24" viewBox="0 0 24 24">
 
<!-- 之后 -->
<svg width="24" height="24">

⚠️ 警告: 几乎总是保持禁用状态。viewBox 对于响应式 SVG 至关重要。

仅在以下情况启用:

您有明确的 width 和 height 属性
SVG 永远不会被缩放
您以固定大小使用 SVG

removeDimensions

移除 width 和 height 属性,同时保留 viewBox。

<!-- 之前 -->
<svg width="24" height="24" viewBox="0 0 24 24">
 
<!-- 之后 -->
<svg viewBox="0 0 24 24">

好处: 默认使 SVG 响应式(它们将缩放到父容器)。

何时禁用: 如果需要固定大小的 SVG 或使用 SVG 精灵图。

convertShapeToPath

将基本形状(<circle>、<rect>、<polygon>)转换为 <path> 元素。

<!-- 之前 -->
<circle cx="12" cy="12" r="10"/>
 
<!-- 之后 -->
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 1 0 0-20z"/>

权衡:

✅ 可以启用进一步的路径优化
✅ 在某些情况下文件稍小
❌ 代码可读性降低
❌ 更难手动编辑

建议: 生产环境启用,开发环境禁用。

removeTitle / removeDesc

移除 <title> 和 <desc> 元素。

<!-- 之前 -->
<svg>
  <title>主页图标</title>
  <desc>代表主页的房屋形状图标</desc>
  <path d="..."/>
</svg>
 
<!-- 之后 -->
<svg>
  <path d="..."/>
</svg>

⚠️ 无障碍访问警告: 这些元素为屏幕阅读器提供无障碍访问的好处。

最佳实践:

对于独立 SVG 保持禁用
如果在 <svg> 元素上使用 aria-label 或 aria-labelledby 可以启用
对于装饰性图标(带有 aria-hidden="true")始终启用

高级插件#

collapseGroups

合并不必要的组(<g>)元素。

<!-- 之前 -->
<g>
  <g>
    <g>
      <path d="..."/>
    </g>
  </g>
</g>
 
<!-- 之后 -->
<path d="..."/>

节省: 减少 DOM 深度和文件大小。

mergePaths

在可能的情况下将多个路径合并为一个。

<!-- 之前 -->
<path d="M10 10h5"/>
<path d="M15 10h5"/>
 
<!-- 之后 -->
<path d="M10 10h10"/>

何时禁用: 如果需要单独动画化各个路径。

inlineStyles

将 CSS 从 <style> 块移动到内联属性。

<!-- 之前 -->
<style>.a{fill:red}</style>
<rect class="a"/>
 
<!-- 之后 -->
<rect fill="red"/>

好处: 更好的兼容性,没有 CSS 特异性问题。

何时禁用: 如果使用 CSS 动画或想用外部样式表为 SVG 设置主题。

导出选项#

缩放预设#

Tiny SVG 为 PNG/JPEG 导出提供方便的缩放预设:

0.25x - 缩略图/预览图像
0.5x - 低分辨率显示
1x - 原始大小
2x - Retina 显示器(最常见)
3x - 高 DPI Android 设备
4x-8x - 打印质量或超高分辨率显示器

示例工作流程:

// 原始 SVG: 24×24
// 2x 导出: 48×48 PNG (用于 Retina 显示器)
// 3x 导出: 72×72 PNG (用于高 DPI Android)

自定义尺寸#

您还可以输入自定义宽度和高度值:

默认锁定宽高比 - 更改宽度会自动调整高度
适用于:
- 社交媒体图像(Open Graph 使用 1200×630)
- 特定设计要求
- 创建多个导出尺寸

PNG vs JPEG#

PNG 导出:

无损压缩
支持透明度
最适合: 带透明度的图标、徽标、插图
典型大小: 比 JPEG 大

JPEG 导出:

有损压缩(默认 95% 质量)
不支持透明度(白色背景)
最适合: 没有透明度的复杂插图
典型大小: 比 PNG 小 40-60%

// 相同的 512×512 导出:
PNG: 87 KB
JPEG: 34 KB (-61%)

实用工作流程#

工作流程 1: 图标优化#

设置:
✅ 显示原始文件: false
✅ 比较 Gzip 压缩后大小: true
✅ 美化标记: false (生产环境)
✅ 多次优化: true
📊 数字精度: 2
📊 变换精度: 4
 
插件:
✅ removeComments
✅ removeMetadata
✅ cleanupIds
✅ removeDimensions (使其响应式)
❌ removeViewBox (保留 viewBox!)
❌ removeTitle (无障碍访问)
✅ convertPathData
✅ collapseGroups
✅ mergePaths

结果: 文件大小减少 60-70%,完美的视觉质量,保持无障碍访问。

工作流程 2: 插图优化#

设置:
✅ 显示原始文件: true (质量检查)
✅ 比较 Gzip 压缩后大小: true
✅ 美化标记: true (更容易编辑)
✅ 多次优化: true
📊 数字精度: 3 (更多细节)
📊 变换精度: 5
 
插件:
✅ removeComments
✅ removeMetadata
✅ cleanupIds
❌ convertShapeToPath (保持可读性)
❌ removeDimensions (明确大小)
❌ removeViewBox
✅ removeTitle (如果使用 aria-label)
✅ convertPathData
✅ collapseGroups
❌ mergePaths (保留图层)

结果: 减少 40-50%,保留可编辑性,保持视觉保真度。

工作流程 3: 最大压缩#

设置:
✅ 显示原始文件: false
✅ 比较 Gzip 压缩后大小: true
✅ 美化标记: false
✅ 多次优化: true
📊 数字精度: 1
📊 变换精度: 2
 
插件:
✅ 启用所有优化插件
✅ removeTitle
✅ removeDesc
✅ convertShapeToPath
✅ removeDimensions
✅ 所有清理和压缩插件

结果: 减少 70-80%,可能有轻微视觉差异,不具备无障碍访问,难以编辑。

用例: 大型图标集、装饰元素、最大性能场景。

专业提示#

1. 重置为默认值#

如果您尝试了各种设置并想重新开始,请单击功能部分中的重置所有按钮。

2. 持久化设置#

所有设置都保存到 localStorage 并在会话之间保持。您不需要每次都重新配置。

3. 批处理策略#

优化多个 SVG 时:

配置一次设置
上传并优化每个文件
设置保持不变
下载所有优化后的文件

4. 快速质量检查#

临时启用"显示原始文件"以验证:

无视觉瑕疵
颜色保持准确
渐变正确渲染
文本可读(如果未转换为路径)

5. 设计系统的导出尺寸#

创建一致的导出策略:

图标: 1x (24×24), 2x (48×48), 3x (72×72)
插图: 1x (原始), 2x (Retina)
社交: 自定义 (1200×630 用于 OG 图像)

常见问题和解决方案#

问题: 优化后 SVG 看起来不同#

解决方案:

增加数字精度(尝试 3 或 4)
增加变换精度(尝试 5 或 6)
禁用 convertShapeToPath
禁用 mergePaths
启用"显示原始文件"以识别有问题的插件

问题: SVG 无法响应式缩放#

解决方案:

确保 removeViewBox 禁用
启用 removeDimensions(移除固定 width/height)
检查 viewBox 值是否正确(不是 "0 0 0 0")

问题: 文本消失或更改字体#

解决方案:

在设计工具中导出前将文本转换为轮廓
或禁用 removeTitle、removeDesc 并检查 cleanupIds

问题: 渐变或滤镜损坏#

解决方案:

禁用 cleanupIds(可能正在重命名引用)
禁用 removeUselessDefs
检查渐变/滤镜定义是否未被移除

问题: 文件大小几乎没有减少#

可能原因:

SVG 已经被优化过
禁用 prettifyMarkup 以获得更小的输出
启用 multipass 以进行更深入的优化
降低数字/变换精度
启用更激进的插件如 convertShapeToPath

结论#

Tiny SVG 的优化设置面板让您对 SVG 优化的每个方面都有精细控制。通过了解每个设置和插件,您可以:

优化文件大小而不牺牲质量
通过保留语义元素保持无障碍访问
保留可编辑性以便设计迭代
以任何尺寸导出以适应不同设备和用例

从推荐的默认值开始,然后根据您的具体需求进行调整。最佳设置是平衡文件大小、视觉质量和您的工作流程要求的设置。

祝您优化愉快!