SVG 是矢量格式,但在屏幕上显示时仍然要“栅格化”成像素点。如果你的线条/形状落在半像素位置,浏览器渲染时就会做抗锯齿,结果看起来像“发虚”。
在 Illustrator 里开启像素预览(不同版本入口略有差异),把图标放大查看:如果描边中心线落在 0.5px 位置,就容易虚。解决办法是把图标整体移动到整像素坐标上,或把尺寸调整为偶数像素。
选中图标对象后,启用对齐到像素网格(或像素对齐相关选项)。这一步会把关键点吸附到像素边界,让显示更利落。注意:对齐后要再检查圆角与曲线是否被破坏,必要时微调。
描边居中最容易造成半像素。更稳的做法是:
1)尽量用偶数的描边粗细(如 2px、4px)
2)必要时把描边改为“对齐到内侧/外侧”(看你的图标结构)
3)或者在导出前把描边转换为轮廓(Outline Stroke),让最终形状更可控
1)尽量使用“最小化/优化”类选项,减少冗余数据
2)保留小数精度要适当:太高会引入更多小数坐标,渲染更容易出半像素
3)如果目标是网页图标,统一 ViewBox 和尺寸(如 24/32/48)更好管理
把导出的 SVG 放到浏览器里,在 1x/2x 缩放下查看边缘:如果某些线条在 100% 时虚、在 200% 时又变清晰,基本就是像素对齐问题。按上面三步处理后再导出一次,效果通常会明显改善。
SVG 发虚不是格式的问题,而是“落点”和“描边”没对齐像素。把坐标对齐到整像素、合理处理描边,再配合合适的导出精度,你的图标会干净很多。