下方整理结果来自仓库中的单独分析与重构实验。这并不代表当前 DrowPack 网页工具会对所有上传文件自动执行相同的 60,114→28 path 整理，也不保证得到相同视觉效果。我们将它公开为展示自动描摹结构与限制的案例。
问题：明明是 SVG，放大后轮廓仍会抖动
分析对象 artwork_vector.svg 中没有用于嵌入 PNG、JPEG 或 WebP 的 <image> 元素，也没有滤镜、蒙版或裁剪 path。也就是说，它不是把栅格图塞进 SVG 的文件，而是完全由真实 path 坐标构成。可放大后，外圈、头发和小装饰周围仍能看到像沿着像素阶梯形成的凹凸和碎片。
原因不是“伪 SVG”，而是源自栅格图的几何结构。描摹器把抗锯齿边缘的多种中间色识别为不同区域，再将像素边界记录为密集的直线和曲线坐标。即使转换成矢量，只要坐标本身粗糙，放大后粗糙形状反而会更加清晰。
直接从原文件统计的数值
60,114 条 path 中有 53,039 条是小型描摹碎片，其中 20,118 条是可视为深色轮廓或噪点碎片的小型 dark path。色带只有 28 个，但每个色带内都散布了大量小碎片。523,692 个半像素坐标也与密集沿着原始像素网格描摹的痕迹一致。
| 文件 | 大小 | path 元素 | 嵌入栅格图 | 含义 |
|---|---|---|---|---|
artwork_vector.svg | 10.63MB | 60,114 | 0 | 自动描摹原版 |
clean_redraw.svg | 1.26MB | 28 | 0 | 保留较多细节的自动整理版 |
clean_web.svg | 666.5KB | 28 | 0 | 面向网页显示的强简化版 |
clean_flat.svg | 437.9KB | 14 | 0 | 进一步减少颜色和小细节的版本 |
28 条 path 元素并不等于 28 个图形
浏览器 DOM 中统计的 <path> 元素数量，与 path 数据内部实际记录的图形数量并不相同。下表中的每个 M 命令都会开始一条新的 subpath。把样式相同的碎片合并为一条复合 path，可以大幅减少 DOM 元素，但内部坐标和 subpath 仍可能原样保留。
| 阶段 | 精确字节数 | 相对原文件 | DOM path | M subpath | 与原版渲染对比 |
|---|---|---|---|---|---|
| 原文件 | 11,148,983 | 基准 | 60,114 | 62,588 | 基准 |
| 无损结构整理 | 6,093,154 | -45.35% | 60,114 | 62,588 | 像素完全相同 |
| 复合 path 合并 | 5,131,778 | -53.97% | 28 | 62,588 | MAE 0.0356/255，差值 >10 的像素占 0.0002% |
| 实验性平滑 | 5,233,587 | -53.06% | 28 | 62,588 | MAE 0.1059/255，差值 >10 的像素占 0.1570% |
复合 path 版本只有 28 个 DOM 元素，却仍保留与原文件相同的 62,588 个 M、197,516 个 L 和 105,892 个 Q 命令。这个阶段主要减少了重复标签和 DOM 节点，并没有消除原始坐标本身的复杂度。
所有对比 PNG 都在同一套本地 Chrome 环境中以 1067×1600 渲染。MAE 是相对原版的 RGB 通道平均绝对误差；“差值 >10”表示至少一个 RGB 通道的差异超过 10 的像素比例。本实验只测量了 SVG 原始文件结构和渲染后的像素差异，没有测量网络传输、解析时间、CPU、内存或加载速度，因此不能仅凭文件变小就宣称速度提升。
渲染前后对比
左侧是自动描摹原版的基准渲染，右侧是单独整理流程生成的 clean_redraw.svg 渲染。整理版合并了大色块和轮廓并减少小碎片，但它并不是试图无损保留所有细节的结果。
视觉信息丰富，但大量细小边缘碎片和阶梯状坐标仍保留在 SVG 结构中。
大色块更简单，但头发、服装和边框中的部分小纹理与曲线发生了变化。
只看整体缩略图时，两张图可能很相似。请放大圆形边框、头发的蓝色高光、裙装褶皱和书本细线，同时确认“噪点减少”和“有意细节损失”。
自动整理实验做了什么
- 以两倍分辨率渲染原始 SVG。没有直接简化现有 path，而是重新建立视觉基准。
- 应用下采样和轻微模糊。为减少像素级阶梯和极小色彩碎片做准备。
- 量化到有限的原图色系调色板。抑制近似中间色被无限切分。
- 应用多数滤波并移除小连通区域。合并或移除孤立点、光晕和小轮廓碎片。
- 将与边框相连的白色背景替换为干净矩形。尝试区分内部白色高光和外部背景。
- 重新查找色彩区域的 contour。简化坐标，并转换为平滑的 cubic Bézier path。
整理版同样是不包含 PNG 的 path 型 SVG。但它并非“保留原始 path 的每个点”，而是根据渲染后的视觉信息重构色彩区域，因此小细节可能被合并或改变。
改善了什么，又失去了什么
| 观察项目 | 改善空间 | 伴随风险 |
|---|---|---|
| DOM/path 复杂度 | 从 60,114 个元素缩减为 28 条复合 path | 一条 path 中的多个 loop 仍可能很难编辑 |
| 文件大小 | 从 10.63MB 降至 1.26MB 或 666.5KB | 细节和调色板减少越多，与原图差异越大 |
| 轮廓噪点 | 减少小点和阶梯状碎片 | 细睫毛和高光也可能一起减弱 |
| 背景 | 整理与边框相连的白色区域 | 如果内部白色被误判为背景，可能形成孔洞 |
| 曲线 | 简化 contour 并进行 Bézier fitting | 无法推断作者意图中的精确曲线 |
从本案例得到的实用结论
- SVG 内没有栅格图，并不代表它自动成为干净的矢量
- path 很多可能表示信息或噪点很多，而不是质量分数高
- 只合并结构的无损优化能缩小文件，却不能修复粗糙坐标本身
- 自动平滑可以缓和轮廓，也可能改变小形状和作者意图
- 网页显示、后续编辑和专业交付应使用不同的验收标准
- 需要精确专业矢量时，高分辨率分层原稿或手工重绘 Bézier 曲线最可靠
如果目的只是网页显示，像 clean_web.svg 这样强力整理的结果可能很实用。若要重新编辑色块，保留较多细节的整理版更合适，但自动重构图形的限制依然存在。商标、大幅印刷和精密切割仍需要手工检查。