先把问题解决
先确认缺少的是资源,而不是裁切:固定相同宽高和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 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>转换后检查实际PNG,而不只看预览
在SVG转PNG工具粘贴第一段,开始转换并下载结果;再用第二段重复。检查两份PNG都应为200×100,蓝方块位于左上角,第二份中间有绿色区域。浏览器可能缩放预览,所以应以下载文件的像素与内容为准。
本次受控样本的检查对象是图片是否存在:第一份绿色区域为空,内嵌版出现绿色。不能据此推断任意字体、滤镜或第三方SVG都兼容。如果连蓝方块也看不到,先检查SVG能否解码、xmlns与标签是否完整,再谈外部图片。
交付前核对
- 画布仍是200×100,没有靠扩大画布掩盖问题
- 左上蓝方块仍在,确认坐标没有整体偏移
- 中间绿色区域存在,确认内嵌数据确实被读取
- 下载文件能在独立图片查看器打开
真实素材按“找回原图—内嵌—再导出”修复
先在原设计中找到所引用的图片,核对使用权与正确版本;用设计软件的嵌入图片或打包功能整理依赖,再重新导出SVG。不要把受限账户地址、临时链接或本机磁盘路径当成可长期交付的图片来源。
自行处理编码时,先看Data URL前缀与纯Base64的区别。只有编码字符却漏了媒体类型和前缀,不等于有效的图片地址。内嵌也会增加文件体积,并把图片内容直接放进SVG,交付前仍需检查是否包含不应公开的素材。
图片回来以后,再处理清晰度和裁切
资源完整只是第一步。照片本身像素不足,内嵌不会创造细节;画布或viewBox不匹配,也可能继续裁掉内容。这些问题应沿SVG导出像素与viewBox指南单独核对。
保留可编辑原稿和原始素材,发送经检查的PNG作为当前交付副本。这个转换流程不能恢复已经丢失的外部文件,也不应用来执行来历不明SVG中的脚本。对于不可信素材,先要求提供静态、安全的交付版本。
参考资料与延伸阅读
按步骤开始处理
进入对应工具,预览处理结果,检查导出的文件。

