从光栅像素到矢量路径
PNG、JPEG、JPG、WebP、AVIF 和 BMP 保存像素网格。SVG 保存形状、填充和坐标,兼容软件可按不同尺寸重绘。矢量化分析相邻像素、划分可见区域、沿区域边界描摹,并用矢量路径近似表示边界。
更改文件名或将位图放入 SVG 容器无法完成这种重建。VectorizeThis 根据可见源图像生成真实的 SVG 几何图形。
处理始终在浏览器中完成
支持的图像在用户设备上解码、描摹、评估和准备。常规转换流程不会将源图像字节上传到转换服务器。本地优先的设计也方便比较多个可能结果,每次调整无需等待服务器往返。
比较候选描摹
没有一种描摹配置适合所有图像。平面图标和照片包含不同信息,切割文件与网页插画的要求也不同。
图稿会比较六种单色方法,或在最多四种支持的调色板配置中比较 10、16、18 或 20 个彩色候选方案。保留多个有用结果时,先选择调色板,再选择 SVG。照片和复杂插画保留专用优化器。加工用途保留物理尺寸和几何检查,并禁用 SVGO。自动选择文档说明此流程。
因此,“最佳结果”指对图像和用途作出较好综合取舍的候选方案,不单指像素相似度最高或文件最小的结果。
用途决定优先事项
- 网页、标志和图标注重简洁外观、可编辑颜色和高效代码。
- 照片和复杂插画保留更多颜色与细节,可能需要更多路径。
- Cricut、刻字、激光和 CNC 流程更重视实用几何、闭合区域、有意义的物理尺寸,以及难加工形状的警告。
- 自动用途在尚未确定使用位置时,平衡一般视觉保真度和可控输出。
加工检查可以识别潜在问题,但无法涵盖所有设备、材料、刀片、切缝、导入设置或应用专有规则。
规范化并检查输出
描摹后,VectorizeThis 为浏览器和编辑器兼容性准备 SVG,移除不必要代码,并应用所选输出选项。可显示小型调色板用于重新着色,使用 currentColor、移除检测到的背景、裁切到有效内容,以及按需格式化代码。
还可检查过高复杂度、微小孤立区域、开放路径及与所选流程相关的其他情况。警告提示需要检查,不代表文件必然失败。
自动描摹的局限
边缘分明、尺寸足够且清晰的图稿通常生成更简单、更接近源图像的路径。噪点、JPEG 伪影、模糊、渐变、透明度、精细纹理和重叠颜色需要解释。描摹的 SVG 无法恢复源图像缺失的细节,也不一定重现原设计师的构造方式。
并排预览和手动控件之所以存在,是因为用户的视觉判断仍然重要。正式制作前,应在目标软件和材料中测试加工文件。
如何测试更改
描摹和排名逻辑的更改会通过代表性图像测试,涵盖图标、标志、线稿、多色、低分辨率源图像、照片和加工示例。自动化测试保护重要的浏览器行为与输出策略,基准比较则有助于在部署前发现质量退化。
技术内容如何编写
VectorizeThis 的技术说明基于转换器实际行为、代表性源图像测试,以及 W3C SVG 规范等一手规范。转换器行为发生重大变化时会复核页面。
VectorizeThis 由 Maxime Desrosiers 开发。若输出不符合预期,请使用转换器中的发送反馈或访问联系页面。