透明的输入,透明的输出

PNG 和 WebP 可以存储 Alpha 通道,也就是每个像素的不透明度;JPEG 不行。上传 PNG 或 WebP 时,描摹器会解码 Alpha 通道,只给不透明度超过一半的像素分配颜色。低于这个值的像素不属于任何颜色,也不会生成路径,所以抠好背景的标志周围的空白区域在 SVG 中依然是空的。输出的 <svg> 没有背景矩形;你把它放在什么上面,就会透出什么。

你可以在预览中验证这一点:结果面板会把描摹出的路径画在棋盘格上,透明区域显示的是棋盘格,而不是白色方块。

半透明像素分两步处理。第一步,以“一半不透明”为界,每个像素要么属于某种颜色,要么不属于:标志柔和的抗锯齿边缘就在这里被切开,所以轮廓正好落在边缘覆盖一半的位置。第二步,每种颜色保留其“墨水”本身的不透明度,这个值在形状内部测量,而不是在柔和的边缘处测量。实心的墨水会写成完全不透明,所以透明背景标志上的黑色文字依然是黑色,而不会变成浅灰色。在源图中本身就半透明的颜色——比如柔和的投影或有色叠加层——会以该不透明度写入 fill-opacity,所以投影会被描摹成一个平整、透明度均匀的形状(例如 54% 不透明度)。描摹无法保留的是渐隐效果本身:投影外圈不透明度不到一半的淡淡部分会被略去,它变成的形状边缘清晰,透明度均匀,而不是逐渐淡出。

棋盘格上带柔和投影的水獭标志;它在棋盘格上的描摹 SVG;以及放在浅绿色背景上的同一个 SVG,投影显示为一个半透明的形状

给我们的水獭标志加上柔和投影后的透明 PNG(左),由它描摹出的 SVG 放在棋盘格上(中)和放在彩色背景上(右)。没有背景框,眼白保留了下来,投影变成了 60% 不透明度的平整形状——PNG 中渐隐的地方,在 SVG 中变成了清晰的边缘。

为什么白色细节在移除背景后依然保留

“移除背景”是从图片边缘向内进行的。它会查看沿图片边框的一圈区域,找出各自至少覆盖这圈区域 15% 的一两种颜色,然后从边缘开始,把与这些颜色(以及与它们相近的颜色)相连的所有像素标记为透明。接着,它还会清除背景与图稿交界处的柔和毛边(紧挨着已移除区域、颜色仍接近背景色的像素),以及接触图片边缘的小斑点。凡是不与边框相连的部分都不会被动到——字母“A”中间的白色空隙、徽章里的白色高光、两条条纹之间的白色缝隙。

这是有意为之:被深色图稿包围的白色标志细节,在移除背景后依然存在。如果你见过其他工具把所有白色像素都抹掉,那是另一种技术(颜色抠像),这也是为什么别处的“移除背景”可能会把设计挖空。

反过来说:如果被包围的白色区域其实与边框相连——哪怕轮廓上只有一个像素的缺口——背景移除就会从缺口钻进去,把它一起去掉。请在源图中修补缺口,或者不开启背景移除,之后在编辑器中删除背景路径。

白底上的白色图稿

描摹器无法区分完全相同的颜色。在白色画布上导出的白色图标,对描摹器来说就是一整块白色区域,结果要么是一个白色矩形,要么是空的转换(“无法描摹这张图片”)。请在上传前解决:

  1. 在任意图片编辑器中,把图标放到对比强烈的纯色背景上(深灰色,或图标中没有出现的颜色)。
  2. 开启“移除背景”后上传。背景与边缘相连,所以会被去掉;白色图标则会保留。
  3. 如果图标中有必须保持透明的封闭透明区域,请改为导出带真正 Alpha 通道的 PNG,这样就完全不需要背景了。

检查结果中的透明度

  • 在浏览器中打开下载的 SVG:页面背景(默认是白色)会从透明区域透出来。
  • 用 SVG 转 PNG 工具把它栅格化——输出是 RGBA 格式,会保留透明度。
  • 用文本编辑器打开文件:除非源图有不透明背景且没有开启背景移除,否则不会有覆盖整个画面的背景路径。

值得了解的相关行为

  • “线稿 / 镂空模板”预设会按每个像素放在白纸上时的亮度来判断:深色变成黑色墨线,浅色变成白纸,透明区域保持透明。因此白色图稿会变成白纸,而不是墨线;透明背景上深色线条的半透明边缘会被略去,而不会变成一圈浅色光晕。
  • 预览 PNG 是带水印的位图;只有解锁后的 SVG 才包含矢量路径和真正的透明度。