SVG的100%不是100像素：导出位图前把viewBox和目标尺寸分开

SVG 写着 width="100%"，并不表示它应该导出成 100 像素宽。百分比描述相对布局，固定像素导出还需要一个明确的目标尺寸。把这两件事混在一起，常会在网页显示正常、导出位图时得到意外宽高。

先看有没有可用的 viewBox

用下面这个最小例子讨论尺寸：

<svg xmlns="http://www.w3.org/2000/svg"
     width="100%" height="100%" viewBox="0 0 500 200">
  <rect width="500" height="200" fill="#438EDB"/>
</svg>

当前图叮工具不会把百分数直接解析成绝对像素；有效的 viewBox 可以提供这条解析路径需要的宽高参考。本例的参考比例为 500÷200=2.5。如果显式请求导出宽度 1000，且不另设高度，按该比例得到 400。

这描述的是当前工具的导出策略，不是所有浏览器对任意 SVG 布局的完整规则。

相对布局和导出画布不要共用模糊数字

可以把待确认信息记成三行：

源图参考尺寸：500 × 200
源图比例：2.5
本轮导出像素：1000 × 400

“页面里铺满父容器”和“下载图片为多少像素”分别确认。设计交接时只写“100%”，接手人无法知道要交付 500、1000 还是其他像素宽。

当前工具在百分比属性缺少有效 viewBox 时不会凭空猜一个安全尺寸。出现尺寸错误，应修正来源中的宽高或 viewBox，再设置目标尺寸，而不是重复点导出等待不同结果。

自己同时指定宽高时，要核对画面

如果同时填入宽和高，别只看文件属性都符合数字，就认为图形比例也正确。源参考比例为 2.5，而输出要求写成 1000×1000，本身就需要进一步决定怎样容纳或变换画面。

边缘留白、裁切、拉伸等可见结果要在最终文件上检查，不能只从参数面板推断。这里不提供所有 SVG 的通用修复：嵌套布局、文字和资源引用仍可能需要单独处理。

先明确最终像素，再讨论倍率

“2 倍图”需要一个明确的展示基准。若目标展示宽度为 500，2 倍输出才对应 1000；没有基准，倍率本身并不够。可以结合SVG 的 2 倍、3 倍导出尺寸确定交付值。

打开图叮 SVG 转图片工具时，先确认清理后的源图可解析，再设置目标像素，导出后用文件属性与实际画面双重核对。不要把百分比当固定像素，也不要把“参数符合”当成最终画面符合。