方法与测试

VectorizeThis 如何工作及测试结果

图像矢量化将像素重建为形状。VectorizeThis 在本地完成这项工作,比较候选描摹,在视觉相似度、实用 SVG 几何图形和可控复杂度之间取得平衡。

从光栅像素到矢量路径

PNG、JPEG、JPG、WebP、AVIF 和 BMP 保存像素网格。SVG 保存形状、填充和坐标,兼容软件可按不同尺寸重绘。矢量化分析相邻像素、划分可见区域、沿区域边界描摹,并用矢量路径近似表示边界。

更改文件名或将位图放入 SVG 容器无法完成这种重建。VectorizeThis 根据可见源图像生成真实的 SVG 几何图形。

处理始终在浏览器中完成

支持的图像在用户设备上解码、描摹、评估和准备。常规转换流程不会将源图像字节上传到转换服务器。本地优先的设计也方便比较多个可能结果,每次调整无需等待服务器往返。

比较候选描摹

没有一种描摹配置适合所有图像。平面图标和照片包含不同信息,切割文件与网页插画的要求也不同。

图稿会比较六种单色方法,或在最多四种支持的调色板配置中比较 10、16、18 或 20 个彩色候选方案。保留多个有用结果时,先选择调色板,再选择 SVG。照片和复杂插画保留专用优化器。加工用途保留物理尺寸和几何检查,并禁用 SVGO。自动选择文档说明此流程。

因此,“最佳结果”指对图像和用途作出较好综合取舍的候选方案,不单指像素相似度最高或文件最小的结果。

用途决定优先事项

加工检查可以识别潜在问题,但无法涵盖所有设备、材料、刀片、切缝、导入设置或应用专有规则。

规范化并检查输出

描摹后,VectorizeThis 为浏览器和编辑器兼容性准备 SVG,移除不必要代码,并应用所选输出选项。可显示小型调色板用于重新着色,使用 currentColor、移除检测到的背景、裁切到有效内容,以及按需格式化代码。

还可检查过高复杂度、微小孤立区域、开放路径及与所选流程相关的其他情况。警告提示需要检查,不代表文件必然失败。

自动描摹的局限

边缘分明、尺寸足够且清晰的图稿通常生成更简单、更接近源图像的路径。噪点、JPEG 伪影、模糊、渐变、透明度、精细纹理和重叠颜色需要解释。描摹的 SVG 无法恢复源图像缺失的细节,也不一定重现原设计师的构造方式。

并排预览和手动控件之所以存在,是因为用户的视觉判断仍然重要。正式制作前,应在目标软件和材料中测试加工文件。

如何测试更改

描摹和排名逻辑的更改会通过代表性图像测试,涵盖图标、标志、线稿、多色、低分辨率源图像、照片和加工示例。自动化测试保护重要的浏览器行为与输出策略,基准比较则有助于在部署前发现质量退化。

技术内容如何编写

VectorizeThis 的技术说明基于转换器实际行为、代表性源图像测试,以及 W3C SVG 规范等一手规范。转换器行为发生重大变化时会复核页面。

VectorizeThis 由 Maxime Desrosiers 开发。若输出不符合预期,请使用转换器中的发送反馈或访问联系页面。

最后更新: