AI驱动的优化

SVG优化器

用AI技术优化你的SVG文件最多可减小90%体积,同时保持画质

将SVG文件拖放到这里
或点击选择文件上传

文件须为SVG,且不超过10MB

免费使用

不限次数

无需信用卡

立即开始

无需注册

马上就能用

功能特点

为什么选择我们?

借助我们的AI技术,获得最佳效果

快速优化

借助AI算法,几秒钟即可优化SVG文件。企业级性能。

减小文件体积

清理多余的元数据和代码,体积最多可减小90%。专业效果有保障。

保持画质

获得优化后的SVG文件,不影响视觉质量。企业级的质量把控。

AI驱动的技术

我们运用最新的人工智能技术,智能优化你的SVG文件。系统从成千上万次优化中不断学习,始终确保最佳效果。

成功率99.9%

10K+次优化

不限使用次数

幕后原理

SVG优化的工作原理

你的文件由SVGO处理。SVGO是广泛使用的开源SVG优化器,这里使用其默认预设并开启多轮(multipass)模式:处理会重复进行,直到文件不再变小。具体改动如下。

1

移除编辑器和文档的冗余信息

XML声明、DOCTYPE、注释和<metadata>块都会被移除,Inkscape、Illustrator、Sketch等编辑器写入文件的多余命名空间和属性也会一并清理,“Created with…”之类的通用描述同样会删掉。这些都不影响图像的绘制效果。

2

数值取整并重写路径数据

坐标和其他数值会四舍五入到三位小数。路径命令会改写为最短的等效形式,多余的线段被舍弃,样式相同的相邻路径也可能合并为一条。

3

简化形状、分组和变换

如果转为路径后代码更短,矩形、直线和多边形会被转换为路径。空的分组和容器会被移除,没有实际作用的外层分组会被合并,变换也会尽可能合并或直接应用。

4

清理样式和颜色

颜色会写成最短形式(例如#ff0000变为red),<style>中的CSS会被压缩,仅重复SVG默认值的属性会被移除,隐藏或空的元素也会被删除。

5

移除未使用的ID和定义

文件内没有任何引用的ID会被删除,未使用的渐变、图案和其他<defs>内容也会被去掉。仍被引用的ID保留原名,不会被缩短。

6

保留viewBox,移除固定尺寸

始终保留viewBox,确保图形正确缩放。width和height属性会被移除,因此SVG会填满你放置它的容器。结果写在同一行,属性顺序一致,这对gzip压缩也有帮助。

优化之前

哪些情况可以放心优化,哪些需要留意

从设计工具导出的静态图标、logo和插画(包括用我们的转换器生成的SVG)都可以放心优化,通常收益也最大。遇到下面这些情况,请更仔细地检查结果。

被外部CSS、JavaScript或精灵图使用的ID

优化器只能看到文件本身。如果外部样式表、脚本或其他页面上的<use href="icons.svg#name">引用了某个ID,该ID会被视为未使用而被删除。文件中自带<style>或<script>元素时,ID会被保留。

带动画的SVG

对路径数据做形变,或依赖特定分组结构的SMIL或CSS动画,在路径被改写、分组被合并后可能失效。简单动画通常没问题,但替换原文件之前务必先预览结果。

无障碍文本

<title>元素会被移除。如果屏幕阅读器需要标签,请在嵌入SVG的位置为<img>标签添加alt文本,或添加aria-label。

通过代码显示和隐藏的图层

用display="none"或不透明度为0隐藏的元素会被视为不可见而被移除。如果你的脚本之后才会显示它们,请对一份未隐藏这些图层的副本进行优化。

仍需编辑的文件

优化后,Inkscape的图层、参考线和其他编辑器数据都会消失。请保留源文件用于编辑,只发布优化后的副本。

常见问题

SVG优化常见问题

优化会改变SVG的外观吗?

对几乎所有文件来说都不会。改动只是移除不会渲染的数据,并把其余内容改写成更短的形式。唯一可能看得出的影响来自四舍五入到三位小数,在viewBox非常小的图形以大尺寸查看时可能会显现。

SVG文件能缩小多少?

这取决于文件的来源。从设计工具导出、带有元数据、注释和长小数的文件通常能缩小很多,而已经精简过的文件几乎缩不了多少。结果页会显示优化前后的确切大小。

文件大小上限是多少?

你可以上传最大10 MB的SVG文件,也可以不上传文件,直接把SVG代码粘贴到“粘贴代码”标签页。

为什么width和height属性被移除了?

优化器保留viewBox并去掉固定的width和height,使SVG随容器缩放。如果需要固定尺寸,请在<img>标签上或CSS中设置width和height。

优化用于精灵图或被JavaScript使用的SVG安全吗?

需要小心。只在文件外部被引用的ID会被移除,因为优化器看不到这些引用。请在实际使用的位置测试优化后的文件,或在这类情况下保留原文件。

优化器会移除无障碍信息吗?

它会移除<title>元素和编辑器写入的通用描述。请在嵌入SVG的位置提供无障碍名称,例如使用alt文本或aria-label。