SVG或设计稿导出小图变模糊,怎样判断是栅格化还是缩放设置问题?
SVG或设计稿导出小图变模糊,应先确认源内容是否真正是矢量,再核对导出像素尺寸和最终显示倍率。矢量文件中也可能嵌入低清位图,放大容器不会创造细节。
先从这里排查
SVG或设计稿导出小图变模糊,应先确认源内容是否真正是矢量,再核对导出像素尺寸和最终显示倍率。矢量文件中也可能嵌入低清位图,放大容器不会创造细节。按目标尺寸从源稿重新导出,检查细线与文字,不能仅修改DPI标签或文件扩展名就认为图像已经更清晰。
先确认源对象是真矢量还是嵌入位图
适用于图标在编辑器放大很清楚,导出后用于网页却发虚,或设计稿本身就包含截图的情况。记录画布、导出区域及页面显示尺寸,检查透明边距是否占掉有效像素。若同一文件被页面放大,模糊可能来自显示设置而非导出器,需要分别观察原文件和最终容器。
核对画布范围导出像素和显示倍率
检查SVG路径、文字和嵌入图片的组成,确认viewBox是否覆盖预期内容。核对导出宽高及缩放方式,小尺寸栅格化会损失细线细节。打印DPI和屏幕像素尺寸含义不同,单改元数据不会增加像素;字体替换与滤镜栅格化也可能影响轮廓,需要在实际导出结果中检查。
从矢量源按目标尺寸重新栅格化
从保留的矢量源按所需像素重新导出,不连续放大已经模糊的小图。网页可在适用场景直接使用正确SVG,或为高像素密度显示提供足够的栅格尺寸。细线图标必要时调整到适合小尺寸的形状,不能为追求参数更大无限增加文件体积,也不要把普通位图改名成SVG。
在一比一显示与实际界面核对清晰度
在一比一像素显示下检查边缘与文字,再放到实际界面和目标设备倍率验证,确认未被额外缩放。检查有无字体缺失、裁边和透明留白异常。成功标准是目标显示条件下清楚且尺寸合适,导出工具显示完成或DPI数值变大本身,不能证明画面已经满足用途。
本文没有重新导出用户设计稿,也没有保证任意低清素材可无损变成矢量。不同设计工具对字体、滤镜和外链资源处理不同,应保留源文件及必要资源。小尺寸抗锯齿可能出现正常灰边,不能把每处非纯色像素都当作模糊;判断仍应结合实际显示用途。
核对来源
以下资料用于核对概念和方法。文中的示例与测试范围分别注明,实际使用时请核对所用工具的版本。