SVG 转 PNG/JPG/WebP 导出后被裁切：viewBox、画布尺寸和透明背景怎么排查

SVG 转图片后出现裁切、大片留白或透明背景变白，不要统一归因于“转换失败”。这三个现象通常来自三条不同链路：

• 主体被切掉：先检查 SVG 的 viewBox 是否没有包住全部内容；
• 四周留白过大：检查画布范围是否远大于实际图形；
• 透明变成白底：检查是不是导出了不支持透明的 JPG。

三种异常先分开诊断

图注：裁切看画布，留白看范围，白底先看输出格式。

viewBox 可以理解为 SVG 的内部取景框。四个数字分别给出起点和可见宽高。图形落在取景框外，就可能在栅格化时被裁掉；取景框远大于图形，输出就会出现大片留白。

图叮的SVG 转图片工具可以处理有 viewBox 的 SVG，也可以从有效的 width 和 height 读取尺寸。只有 viewBox、没有固定宽高时，工具会据此推导原始比例；设置输出宽度后，高度按比例计算。

主体被裁切：检查图形是否超出 viewBox

先打开 SVG 源码，看根节点上的 viewBox="x y width height"。如果图形用了负坐标、平移变换、描边或滤镜，实际可见边界可能超出这个范围。转换器不会替你猜测被遗漏的画布。

最稳的修复是在原设计软件中执行“画板适合图稿”或等价操作，再重新导出。不要只把输出宽度调大：宽度会放大现有取景框，不能把框外内容拉回来。

四周留白过多：检查画布是否比图形大

有些图标从整张海报画板导出，主体只占中央一小块。转成 PNG 后留白仍会被保留，因为它属于 SVG 画布的一部分。

先在矢量软件中缩小画板范围，或正确调整 viewBox。如果后续确实需要固定安全边距，应把边距作为交付要求记录，而不是靠转换后随手裁剪。随手裁剪容易让同一组图标的边距不一致。

透明背景变白：先看导出格式

PNG 和 WebP 可以保存透明通道；JPG 没有透明通道。当前工具在导出 JPG 时会要求选择背景色，并先在画布上铺底。看到白底不一定是错误，可能是已明确选择了白色背景。

如果需要透明 Logo、图标或贴纸边缘，优先导出 PNG 或 WebP。关于 Logo 的最终交付选择，可参考透明 Logo 用 PNG 还是 SVG。

输出尺寸也有边界

当前工具让你设置输出宽度，并保持原始比例。宽高必须是正数，单边不能超过 16384 像素，总像素也受限制。把一个小图标直接放大到极端尺寸，不会增加路径之外的新细节，还可能触发浏览器内存和画布限制。

比较合理的做法是按实际用途设置：

• 网页图标：按页面最终显示尺寸的合理倍数导出；
• 社媒和演示文稿：按目标版式宽度导出；
• 需要后续压缩：先确保尺寸正确，再用图片格式转换与压缩控制体积；
• 需要无限缩放或继续编辑：保留原 SVG，不要只留栅格图。

输入方式不同，安全边界相同

工具支持上传 SVG 文件、粘贴源码，或读取允许 CORS 的 SVG 链接。链接能否读取取决于对方服务器的跨域响应；读取成功也不表示 SVG 内部引用的其他网络资源会被保留。

转换前会清理脚本、事件处理器、foreignObject 和外部资源。清理能降低把不可信 SVG 当网页内容执行的风险，也可能让依赖外部字体或图片的文件出现缺失。因此预览不是可选步骤。

导出后用四步验收

1. 对照原 SVG，确认四边没有被裁切；
2. 检查留白是否符合这组素材的统一规范；
3. 在棋盘格或深浅两种背景上检查透明边缘；
4. 打开下载文件，核对真实像素尺寸、格式和文件体积。

如果出现异常，回到对应链路修：裁切修 viewBox，留白修画布范围，白底改输出格式或背景色。现在可以在SVG 转图片上传同一文件，先导出 PNG 核对透明和画布，再决定是否需要 JPG 或 WebP。