FORMAT DECISION

并非所有 SVG
都是纯矢量

DrowPack 的“原始画质 SVG”会把当前画布图像保存在 SVG 内,而“纯矢量 SVG”会把色块和轮廓重新描摹成 path。问题不在于哪一种绝对更好,而在于你需要完成什么任务。

发布于 2026-07-19格式选择指南预计阅读 7 分钟
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主体与背景的区分简单移除背景后确认外轮廓已经闭合

在两者中做选择的比较流程

  1. 用一句话写下最终用途。先区分是“在网页上尽量像原图”还是“需要编辑色块”。
  2. 按默认值生成原始画质 SVG。在 100% 和 400% 缩放下记录视觉质量与文件大小。
  3. 选择适合输入的快速矢量模式。不要一开始就把所有高级参数都调高。
  4. 比较相同的两个位置。选择一处外轮廓和一个最小内部细节,检查白缝、形状变化和缺失。
  5. 查看 SVG 结构和大小。在编辑器中检查 path 数是否可操作、浏览器预览是否卡顿。
  6. 选择满足用途且更简单的一项。如果看不出差别,复杂度较低的结果通常更易管理。

最终文件检查

  • SVG 能否在实际要使用的应用中正常打开
  • 放大到 400% 时,轮廓是否符合预期
  • 白色背景与内部高光是否被正确区分
  • 小字或标志中的孔洞是否被封住
  • 纯矢量的 path 数量与文件大小是否仍适合编辑
  • 有没有把原始画质 SVG 错称为纯矢量

自动描摹是一个快速起点。对于商标、大幅印刷或精密切割等非常重视曲线准确度的任务,建议在结果基础上手工整理 Bézier 曲线,或直接使用原始矢量源文件。