图片处理实用指南

SVG转PNG后图片消失了?先检查外部引用,再做自包含导出

SVG在网页里有图片,转成PNG后却空了一块,可能是它依赖了外部资源。先把需要的图片整理为可独立读取的内嵌素材,再转换;放大画布或提高导出尺寸不能补回没有加载的图片。下面用蓝色方块和绿色小图说明怎样定位。

数位板上的眼镜与触控笔
配图:Milad Fakurian · Unsplash License

先把问题解决

先确认缺少的是资源,而不是裁切:固定相同宽高和viewBox,只改变图片引用方式,再检查导出PNG的内容。

先辨认:图形存在,还是只有一个图片地址?

SVG里的矩形、路径与文字可以直接写在文件里,image元素则可能只保存一个地址。例如href="photos/item.png"指向相对文件;传走一个SVG,并没有同时传走photos目录。设计软件中看得到,不代表另一台电脑或转换器已经拿到了这张图。

MDN的SVG图片上下文说明指出,一些浏览器会在SVG作为图片使用时禁止加载外部资源,但允许内联data URL。把SVG直接当文档打开,与把它交给图像解码、Canvas导出,适用的条件不同。不能用前一种显示成功证明后一种必定成功。

三种内容为什么表现不同
内容依赖什么先检查什么
rect/path图形SVG自身的几何描述坐标、填色和裁切
相对路径图片配套文件及路径解释位置原图是否交付、路径是否仍成立
内嵌data URL图片SVG中保存的完整编码MIME类型、前缀与完整数据

用同一张200×100画布,只改一个条件

这是自编教学样本,不含真实商品资料:白底200×100,左上角有10×10蓝色矩形,中间应有一块绿色图片。下面第一段故意指向不存在的missing-product.png。蓝色矩形出现、绿色图片没出现时,不能说整份SVG都无法读取。

第二段把同一个16×16绿色PNG以内嵌形式提供;image的显示区域仍为80×60,位置仍为40、20。两段SVG的画布与坐标一致,差别只有图片资源从哪里来。内嵌样本是纯色定位用图,不是锐度或商品颜色测试。

缺失资源的反例

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100"><rect width="200" height="100" fill="white"/><rect x="5" y="5" width="10" height="10" fill="blue"/><image href="missing-product.png" x="40" y="20" width="80" height="60"/></svg>
在转换器粘贴此完整SVG;相对文件不随这段文字提供。

带完整内嵌图片的样本

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100"><rect width="200" height="100" fill="white"/><rect x="5" y="5" width="10" height="10" fill="blue"/><image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAGUlEQVQokWMQW+xFEmIY1bB4NJTEhmvSAAB+RAMQ4n2ahQAAAABJRU5ErkJggg==" x="40" y="20" width="80" height="60"/></svg>
可直接复制,内嵌图片为本站生成的16×16绿色定位方块。

转换后检查实际PNG,而不只看预览

在SVG转PNG工具粘贴第一段,开始转换并下载结果;再用第二段重复。检查两份PNG都应为200×100,蓝方块位于左上角,第二份中间有绿色区域。浏览器可能缩放预览,所以应以下载文件的像素与内容为准。

本次受控样本的检查对象是图片是否存在:第一份绿色区域为空,内嵌版出现绿色。不能据此推断任意字体、滤镜或第三方SVG都兼容。如果连蓝方块也看不到,先检查SVG能否解码、xmlns与标签是否完整,再谈外部图片。

交付前核对

  • 画布仍是200×100,没有靠扩大画布掩盖问题
  • 左上蓝方块仍在,确认坐标没有整体偏移
  • 中间绿色区域存在,确认内嵌数据确实被读取
  • 下载文件能在独立图片查看器打开

真实素材按“找回原图—内嵌—再导出”修复

先在原设计中找到所引用的图片,核对使用权与正确版本;用设计软件的嵌入图片或打包功能整理依赖,再重新导出SVG。不要把受限账户地址、临时链接或本机磁盘路径当成可长期交付的图片来源。

自行处理编码时,先看Data URL前缀与纯Base64的区别。只有编码字符却漏了媒体类型和前缀,不等于有效的图片地址。内嵌也会增加文件体积,并把图片内容直接放进SVG,交付前仍需检查是否包含不应公开的素材。

图片回来以后,再处理清晰度和裁切

资源完整只是第一步。照片本身像素不足,内嵌不会创造细节;画布或viewBox不匹配,也可能继续裁掉内容。这些问题应沿SVG导出像素与viewBox指南单独核对。

保留可编辑原稿和原始素材,发送经检查的PNG作为当前交付副本。这个转换流程不能恢复已经丢失的外部文件,也不应用来执行来历不明SVG中的脚本。对于不可信素材,先要求提供静态、安全的交付版本。

参考资料与延伸阅读

按步骤开始处理

进入对应工具,预览处理结果,检查导出的文件。

这个主题的后续文章

沿着同一主题,继续阅读引用了本文的新文章。

继续阅读