30 秒结论
要原样保留渐变、纹理、笔触和照片,原始画质 SVG 更稳妥;要编辑标志的色块和线条,或将极简图形无限放大,可以尝试纯矢量 SVG。
文件内部有什么
SVG 是基于 XML 的容器,因此内部并不只能放矢量图形。它既可以通过 <image> 元素嵌入 PNG 等栅格图片,也可以通过 <path> 记录坐标和曲线。这正是不能只凭扩展名判断可编辑性的原因。
| 对比项 | 原始画质 SVG | 纯矢量 SVG |
|---|---|---|
| 核心结构 | 在 SVG 中嵌入高分辨率栅格图像 | 用 path 坐标记录轮廓与色块 |
| 与原图的视觉相似度 | 高,直接保留当前画布 | 取决于描摹结果 |
| 逐个编辑色块 | 困难,嵌入图片是一个整体 | 可以,但 path 太多时编辑会很吃力 |
| 无限放大 | 不可以,只是用较高分辨率延后像素感出现 | path 本身与分辨率无关 |
| 复杂照片、插画 | 适合 | 通常会使文件增大并增加噪点 |
| 标志、图标、剪影 | 可用于保留外观 | 以编辑为目的时更合适 |
原始画质 SVG 的优点与限制
DrowPack 会把当前画布生成 PNG 数据,并嵌入 SVG 的 image 元素中。用户可以选择 1x 到 10x 的放大清晰度,但受原图尺寸和浏览器内存影响,实际倍率会限制在安全范围内。因为这种方式不会强行把渐变和微小高光拆分成 path,所以更容易保持接近原图的视觉效果。
适合的情况
- 照片、绘画、水彩和笔刷纹理等连续色彩变化较多时
- 外部系统要求 SVG 扩展名,但不需要逐个编辑内部图形时
- 在网页上保留原作观感最为重要时
- 希望避免自动描摹生成数万个 path 时
需要避免的误解
- 选择 10x 并不代表所有原图的真实信息都会变得清晰十倍。
- 继续放大嵌入图像,最终仍可能看到栅格像素。
- 即使能在 Illustrator 中打开,也不代表眼睛、头发和背景会被拆成可独立编辑的图形。
- 由于 SVG 容器开销和嵌入图像,文件不一定比同一张 PNG 更小。
纯矢量 SVG 的优点与限制
纯矢量模式会查找图像中的颜色和亮度边界,并生成 path。简单标志或剪影可以整理成少量清晰图形,但如果把抗锯齿像素和纹理也解释为色块,极小 path 的数量就可能迅速增加。
适合的输入
- 背景与主体分离清楚的单色剪影
- 颜色少、边界清晰的标志和图标
- 使用粗且闭合线条绘制的黑白线稿
- 为了印刷、切割或缩放而确实需要 path 的简单图形
较难处理的输入
- 头发、眼睛高光和半透明效果丰富的插画
- 含噪点和压缩痕迹的小尺寸 JPG
- 照片、光照渐变以及布料或纸张纹理
- 白色背景和内部白色细节同时存在、背景移除标准不明确的图片
path 越多,不代表矢量质量越好
沿像素边缘生成的数万个 path,即使放大也可能继续保留阶梯状坐标。复杂度提高了,却没有恢复作者原本希望得到的平滑曲线。
按输入类型选择
| 输入类型 | 优先尝试 | 原因 | 尝试纯矢量的条件 |
|---|---|---|---|
| 照片 | PNG/JPG 或原始画质 SVG | 保留连续色调和纹理 | 仅在需要海报化图形效果时 |
| 复杂角色插画 | 原始画质 SVG | 保留小装饰和色彩变化 | 已经准备好减少色块的单独版本时 |
| 简单彩色插画 | 两者都比较 | 需要平衡可编辑性与文件大小 | 轮廓清楚且颜色数量较少时 |
| 黑白线稿 | 纯矢量 SVG | 容易按亮度阈值分离线条 | 细线断开时,仅小幅调整阈值和去噪 |
| 标志、图标 | 纯矢量 SVG | 便于编辑图形和缩放 | 若源图是小 JPG,先寻找更大的原图 |
| 剪影、贴纸轮廓 | 纯矢量 SVG | 主体与背景的区分简单 | 移除背景后确认外轮廓已经闭合 |
在两者中做选择的比较流程
- 用一句话写下最终用途。先区分是“在网页上尽量像原图”还是“需要编辑色块”。
- 按默认值生成原始画质 SVG。在 100% 和 400% 缩放下记录视觉质量与文件大小。
- 选择适合输入的快速矢量模式。不要一开始就把所有高级参数都调高。
- 比较相同的两个位置。选择一处外轮廓和一个最小内部细节,检查白缝、形状变化和缺失。
- 查看 SVG 结构和大小。在编辑器中检查 path 数是否可操作、浏览器预览是否卡顿。
- 选择满足用途且更简单的一项。如果看不出差别,复杂度较低的结果通常更易管理。
最终文件检查
- SVG 能否在实际要使用的应用中正常打开
- 放大到 400% 时,轮廓是否符合预期
- 白色背景与内部高光是否被正确区分
- 小字或标志中的孔洞是否被封住
- 纯矢量的 path 数量与文件大小是否仍适合编辑
- 有没有把原始画质 SVG 错称为纯矢量
自动描摹是一个快速起点。对于商标、大幅印刷或精密切割等非常重视曲线准确度的任务,建议在结果基础上手工整理 Bézier 曲线,或直接使用原始矢量源文件。
