Logo 从 PNG 转 SVG——细节不丢失的矢量化指南
手里有张 PNG 格式的 Logo。要给网站用 SVG——给 Retina 屏上锐利显示的邮件签名用、给印名片的印刷店要求矢量。雇设计师重画要好几天。自动矢量化工具几秒钟。这篇讲怎么矢量化得干净、这些工具在哪失败、失败时怎么补救。
用到的工具：paste-to-download.com/zh-CN/vectorize——浏览器版 PNG/JPG 转 SVG，不上传、无水印。
为什么 Logo 需要 SVG
Logo 必须在任何尺寸都好看。32 × 32 的 favicon 和 4000 × 4000 的展会 Banner 是同一个 Logo，但栅格文件（PNG、JPG）只能是一个尺寸——其他尺寸要么像素糊（拉大），要么浪费字节（缩小但文件大）。
SVG（可缩放矢量图形）把 Logo 描述成数学——曲线、填色、描边。数学在任何尺寸都完美渲染。现代浏览器和多数设计软件都标配支持。
理想做法：主 Logo 存 SVG，按需导出栅格版本。
自动矢量化在做什么
矢量化工具（也叫 trace 或描摹）扫栅格图，找出颜色相近的区域。每个区域算一条闭合路径沿区域轮廓走。输出每区域一条路径——就是你的 SVG。
输出质量取决于：
- 源图分辨率——越高细节越多
- 边缘锐度——干净的边描出来干净；糊边出歪扭的路径
- 颜色数——颜色少 = 输出简单；颜色多 = 路径多
- 抗锯齿伪影——栅格化产生的软边会形成假的微色区
理解这些就能预处理源图，得到干净矢量输出。
第 1 步：用手头最高分辨率的源图
金科玉律：原始矢量文件存在（AI、EPS、PDF、SVG）就用它，别矢量化。
只有栅格时挑最大、最干净的：
- 2000 × 2000 PNG 永远比 200 × 200 缩略图矢量化效果好
- 网站上截的 Logo 比网站源文件差
- 翻拍印刷 Logo（相机拍名片）远比数字文件差——重编码 + 摄影噪点 = 大量假色区
如果源图小或带噪点，先用 /zh-CN/upscale Lanczos 模式清洗 + 放大再矢量化。
第 2 步：需要的话先清理源图
矢量化工具喜欢：
- 干净的白色或透明背景
- 纯色（不要渐变或摄影纹理）
- 锐利的边（抗锯齿没问题；糊的不行）
矢量化工具讨厌：
- JPEG 块状失真（每 8×8 块变成假区域）
- 渐变（被解析成多个离散色阶）
- 投影（被矢量化成一圈圈低透明环）
- 摄影背景（每片叶、每朵云变成一条路径）
预处理：
- 去背景 /zh-CN/remove-background 如果 Logo 在复杂背景上
- 轻微模糊 如果源图有 JPG 失真（反直觉——软化假边）
- 提对比度 如果源图发灰
- 加饱和度 让矢量化器更清楚区分色区
第 3 步：打开矢量化工具选合适模式
打开 /zh-CN/vectorize。拖入 Logo。选模式：
- 高对比度：1–2 色 Logo 最佳（黑白、黑色加单色）。出 1–2 条路径。
- 彩色：多色平涂 Logo（3–8 色）。每色区一条路径。
- 细节：带很多小元素或精细线条的 Logo。路径多，输出大。
现代品牌 Logo（干净、扁平、2–4 色）默认走「彩色」模式。老式字母组合或单色 Logo 走「高对比度」。
第 4 步：调阈值和颜色数
两个关键滑块：
- 阈值（0–255）：区分明暗的亮度切点。阈值越高越多像素归「暗」区。默认 128（中灰）。调到 Logo 边缘跟原图匹配为止。
- 颜色数：SVG 里最多有几种填色。2 色 Logo 设 2，5 色 Logo 设 5。太高生噪，太低合并掉本不同的色。
paste-to-download 矢量化器两个滑块都实时预览。调到预览跟原图一致再导出。
第 5 步：导出 SVG 在浏览器里验证
点 矢量化并下载。把得到的 .svg 拖到浏览器地址栏：
- 应该跟 PNG 一致
- Ctrl+= (Mac 上 ⌘+=) 放大到 1000% 边还是锐
- 改浏览器窗口大小——SVG 在任何尺寸下都锐利重绘
看着破（锯齿路径、丢色、形怪）就回第 4 步换设置。
常见失败 + 修法
「Logo 边缘看着波浪」
源图要么分辨率太低，要么有 JPG 失真。换更高分辨率源，或者把源跑 /zh-CN/compress 先转 PNG（去 JPG 块状），再矢量化。
「有些颜色合并了」
颜色数设太低。提高直到原图每个独立填色都有自己的路径。
「Logo 周围有过渡色光晕」
抗锯齿伪影。降低颜色数（把光晕合并到主色），或者提高阈值（消除浅边像素）。
「Logo 里的小字读不出」
文字是栅格矢量化最难的东西。两个选择：(a) 找到原字体在 SVG 里手动排版（公司一般用商业可得的字体；查字体名），或 (b) 接受矢量近似，以后再修。
「原图渐变变成色带条」
矢量化器没法轻易表示连续渐变。要手工把色带换成 <linearGradient> 或 <radialGradient> 元素。多数 Logo 不值得这么做；渐变是关键就在 Illustrator/Figma 按品牌色规范重做。
什么时候该雇设计师
自动矢量化适合：
- 内部用（幻灯片、内部站、原型）
- 从印刷材料的初转换
- 形状简单的小 Logo
不适合：
- 多年使用的品牌正式素材
- 含复杂手绘元素的 Logo
- 超大印刷尺寸（横幅、车贴）
品牌正式素材的工作流：自动矢量化 → 用输出做起点 → 在 Inkscape 或 Illustrator 里手工清理。设计师从自动矢量化起点开始要花 30 分钟而不是 3 小时。
浏览器本地：为什么对 Logo 重要
Logo 常常是发布前机密。把它上传到未知服务做矢量化是泄露风险。
/zh-CN/vectorize 完全在你浏览器标签里跑。基于 Potrace 的矢量化器编译成 WebAssembly，本地运行，Logo 不离开设备。Network 验证：没有任何外发 Logo 数据。
一句话总结
- 用手头最高分辨率干净源
- 需要时去背或去噪
- 打开 /zh-CN/vectorize 选对模式
- 调阈值和颜色数到预览跟原图一致
- 导出后在浏览器里多个缩放级别验证
结果：一个从 16 px favicon 到 16 ft 展会 Banner 都完美缩放的 Logo。