很多人第一反应是把导出尺寸翻倍，结果还是不够清晰。这是因为模糊往往来自“采样方式”，而不是“像素数量”。如果图标的关键边缘落在半个像素上，导出时软件为了让边缘过渡更自然，会自动做灰阶过渡，于是你在 100% 或缩放显示时就会觉得发虚。
想判断问题属于哪一类，可以用一个最简单的检查：把图标放大到 800% 观察边缘。如果边缘出现一条灰色过渡带，而不是干净的黑白分界，多半就是像素对齐或抗锯齿策略的问题。
像素对齐的核心原则是：直线和关键转折点尽量落在整数像素坐标上。举个例子，同样是一条 1px 的竖线，x=10 的位置会很锐利，但 x=10.5 往往会被分配到左右两列像素里，出现两列半透明像素，视觉上就是“糊”。
处理方法：
第一，检查画板尺寸和图标尺寸是否为整数像素（例如 24x24、32x32）。第二，检查描边是否为 1px/2px 这种整数值。第三，如果使用居中描边，注意路径中心可能会落在 0.5 像素上，必要时改为内侧描边或把对象整体移动 0.5 像素回到网格上。
抗锯齿的目标是让斜线和曲线更平滑，但它会引入灰阶像素。对于小尺寸 UI 图标，过多的灰阶会让细节变“糊一片”。所以抗锯齿要根据图标类型来选：
如果图标以直线、直角为主（例如表格、文件、菜单等），优先保证像素对齐，减少不必要的软化。对于曲线较多的图标（例如定位、心形、云朵等），适度的抗锯齿可以换来更自然的轮廓，但要避免在 1px 细线处出现大面积灰阶。
常见的错误流程是：先把图标缩放到目标尺寸，再导出 PNG。这样会产生一次缩放采样；如果你在网页或设计稿中又缩放显示，就会发生第二次采样，清晰度会明显下降。
更稳的做法是：保持源图标在一个更易编辑的尺寸（例如 64 或 128），在导出面板里直接输出 16/20/24/32 等目标像素尺寸的切图。这样每个尺寸只发生一次、可控的采样，锐利度更好。
SVG 是矢量，但浏览器最终仍然会把它渲染到像素网格上。如果 SVG 在页面中被缩放到非整数像素尺寸（例如 23.5px），或者 CSS 缩放/transform 导致子像素定位，就会出现边缘发虚。解决方案通常不是改 SVG，而是改布局：
让图标容器尺寸使用整数像素；避免 transform: scale 这种会引入子像素的缩放；如果必须缩放，尽量让缩放比例对应常见的 2x、3x 设备像素比，让渲染更稳定。
图标“糊”的感觉有时来自背景的对比度和边缘光晕。建议在导出前做一个固定的复核步骤：在 100% 显示下，分别放到白底、浅灰、深色背景上看一遍；如果图标是深色线条，尤其要注意边缘是否出现灰边或发脏。
如果你发现某个尺寸特别糊，不要急着加锐化。优先回到前面的两个点：像素对齐和描边位置。绝大多数小尺寸的清晰度问题，都能在这一步解决。
图标清晰度的本质不是堆像素，而是让关键边缘对齐像素网格，并在导出到最终尺寸时只发生一次可控采样。把这两件事做好，再配合适度的抗锯齿，基本可以让 PNG/SVG 在不同场景里都保持干净利落。
