如何使用
- 点击“加载示例 SVG”查看一个带冗余元数据的设计导出图标如何被精简,或拖入自己的
.svg文件。 - 也可以把从 Figma、Illustrator、Sketch 或代码仓库复制的原始
<svg>代码粘贴到输入框。 - 选择“标准”进行更稳妥的默认优化;需要进一步减小体积时,再切换到“激进”。
- 查看“原始体积”“优化后体积”和“已节省”,并用右侧预览确认图形没有明显变化。
- 点击“复制 SVG 代码”用于 HTML、React 或图标组件,或点击“下载 SVG”保存优化文件。
示例场景:把设计工具导出的品牌图标粘贴进工具,确认节省比例和预览效果后,复制精简后的内联 SVG 用于网页导航栏或按钮图标。
核心功能
- SVGO 驱动的 SVG 压缩:使用浏览器端 SVGO 精简矢量标记,去除元数据、空分组和可压缩属性。
- 清理 Figma / Illustrator 导出代码:适合把设计工具导出的冗长 SVG 变成更适合上线的图标代码。
- 即时体积对比:载入后显示原始体积、优化后体积和节省比例,快速判断是否值得替换资源。
- 复制代码或下载文件:一键复制优化后的
<svg>标记,也可以下载新的.svg文件。 - 本地处理保护设计资产:文件读取、SVGO 优化、预览和导出都在当前浏览器内完成,不上传图标、Logo 或未公开插画。
相关工具
2026 最新 FIRE 财务自由计算器(剔除通胀版)。拒绝虚高数字,精准模拟实际购买力下的复利增长。支持 4% 法则验证与养老金缺口反向推算。支持一键导出 CSV,完美适配 Excel 或 Notion 财务看板。隐私优先,本地计算零上传。
根据账户资金、风险比例、入场价和止损价计算交易仓位。所有计算在浏览器本地完成,不上传账户数据,可对比多档风险方案。
输入本金、定期投入、年化收益率和投资年限,计算复利增长结果,并用交互式图表展示本金、利息和最终总额。数据仅在本地计算。
使用 Loan Calculator / Mortgage Calculator 在浏览器本地计算月供、总利息与还款明细。输入贷款额、年利率和期限,立即查看图表与还款计划表。
使用 Investment Calculator / ROI Calculator 在浏览器本地估算初始本金、每月定投、年化回报率和通胀后的投资结果。立即查看复利图表、本金/收益拆解、ROI 与年度明细。
使用 APR to APY Calculator 在浏览器本地完成 APR/APY 双向换算。输入利率并选择复利频率,立即查看有效年利率、差值和多频率对比表。
使用这款利润率计算器在浏览器本地计算毛利、Margin 和 Markup。输入成本和售价,或输入成本与目标毛利率,立即推算售价并避免把加价率误当利润率。
使用 CPM 与 CPC 计算器在浏览器本地测算广告花费、展示量、点击量、CPM、CPC 和 CTR。输入预算与目标成本,快速推演可获得的曝光或点击。
计算逻辑
SVG 优化不是把矢量图转成位图,而是清理 XML 矢量标记本身。本工具调用运行在浏览器端的 SVGO,常见处理包括删除编辑器元数据、合并无意义分组、移除空属性、压缩路径和舍入坐标。
“标准”模式偏向稳妥,适合大多数图标和插画;“激进”模式会启用多轮优化并使用更短数值精度,体积可能更小,但极复杂路径可能出现细微视觉差异。工具不会栅格化 SVG,优化后仍然是可复制、可下载的矢量代码。
常见问题
如何减小 SVG 文件体积?
最常见的方法是移除设计工具写入的元数据、空分组、冗余属性和可压缩路径。本工具会用 SVGO 在浏览器里执行这些优化,并显示节省比例。
如何清理 Figma 导出的 SVG 代码?
把 Figma 导出的 .svg 文件拖入工具,或直接粘贴 <svg> 代码。建议先用“标准”模式检查结果,确认预览正常后再复制或下载。
SVG 压缩会降低图片质量吗?
通常不会。SVG 是矢量标记,SVGO 主要移除不可见的元数据和冗余结构。不过极复杂路径在“激进”模式下可能出现细微变化,建议先看预览再替换生产资源。
这个工具会上传我的图标或插画吗?
不会。文件读取、SVGO 优化、预览、复制和下载都在浏览器本地完成。
可以把优化后的 SVG 直接用于 HTML 吗?
可以。“复制 SVG 代码”会复制完整的 <svg> 标记,适合内联到 HTML、React 组件或图标系统。
它能把 PNG 或 JPG 转成 SVG 吗?
不能。这个工具只优化已有 SVG 矢量代码,不执行位图转矢量。