SVG 转 PNG 的 2 倍、3 倍图怎么定尺寸？先算最终像素，不要放大导出文件

SVG 本身是矢量，放大不会像位图那样直接变糊；一旦导出成 PNG，像素尺寸就固定了。2 倍图和 3 倍图不是把一个小 PNG 放大两次，而是从 SVG 直接按目标像素栅格化。

先把最终展示尺寸写在纸上

图注：倍率乘的是最终展示尺寸，不是文件名。

先写出页面或应用实际显示的宽高。例如图标在界面中占 100×100 CSS px：

• 1 倍：导出 100×100px；
• 2 倍：导出 200×200px；
• 3 倍：导出 300×300px。

公式很简单：目标像素 = 最终展示像素 × 目标倍率。先定展示尺寸，才能知道倍率有没有意义。

不要把倍率当成质量开关

3 倍文件不一定比 2 倍更好。如果接收端只显示 80px，导出 300px 可能只是增加文件体积；如果最终要打印或继续裁切，才有理由保留更大的像素余量。倍率解决的是采样密度，不会自动修复源 SVG 的错误字体、裁切或缺失资源。

如果导出后仍然出现主体被裁切，先回到源 SVG 检查 viewBox；如果透明背景变成白色，则检查目标格式是否支持透明。

在图叮里按目标宽高导出

使用SVG 转图片工具时，输入 SVG 后直接填写目标宽高和输出格式。页面能力说明的是在浏览器本地栅格化并保持宽高比；正文不把 2 倍、3 倍写成所有设备的硬性规范。

导出前确认宽高是否锁定比例。一个非正方形 SVG 若被强行填成正方形，会先发生几何变形，之后再高密度也没有意义。

什么时候不该导出 3 倍

以下场景通常不需要盲目导出 3 倍：

• 目标平台会再次压缩图片；
• 文件只用于列表缩略图；
• 设备显示尺寸固定且文件有严格体积上限；
• 源 SVG 本身含有外部字体或资源，放大只会把问题放大。

反过来，若图片会被高密度屏放大查看，或者后续还要裁出细节，可以选择 2 倍或 3 倍，但要记录交付尺寸，避免团队下一次又从文件名猜倍率。

若你拿到的已经是位图，只是要统一长边，应改用图片改尺寸工具做等比缩放；不要把位图伪装成 SVG 再导出。