SVG 转 PNG 使用指南：按倍率导出清晰位图

SVG 放大不会糊，PNG 放大就会；把 SVG 转成 PNG 时，倍率选得对不对，直接决定最终图能不能用。

什么时候需要把 SVG 转成 PNG

很多平台只接受 PNG 或 JPG：应用商店素材、公众号插图、PPT、部分电商后台和打印店都不会直接处理 SVG。手里的 logo、图标、二维码是矢量文件时，就需要先渲染成位图，才能上传或插入文档。

另一种需求是固定尺寸输出：同一个图标要 1x 给普通屏幕、2x 给高清屏、更大的给印刷或再加工。从 SVG 按倍率重新渲染，边缘比先导出小图再放大干净得多；需要透明背景时，PNG 也能保留 alpha 通道。

先确认 SVG 自身的宽高。导出尺寸通常是 SVG 的 width/height 乘以倍率，所以 24×24 的图标选 4x 会得到 96×96；只有 viewBox、没有明确宽高的文件，可能导出失败或尺寸不符合预期，最好先在编辑器里补上。

倍率按最终用途选：网页和 App 图标通常 1x 或 2x 就够，印刷则要先按成品尺寸和 DPI 算出需要的像素，再决定倍率。4x 不是越大越好，位图体积会明显增加，还可能触碰 canvas 的尺寸上限；导出后放大到 100% 检查边缘和透明区域。

网页和 App 里的图标、logo 应优先保留 SVG，体积小、任意缩放都清晰，还能用 CSS 改颜色。只有对方不收 SVG、或者需要位图做预览和印刷时，才导出 PNG；转成位图后再放大，就回到了普通图片的清晰度限制。

SVG 里的外部图片、远程字体和 CSS 在作为图片渲染时通常会被安全策略拦截，导致缺字、缺图或样式错位。正确做法是先把文字转成路径、图片内联为 base64，或者换用支持内嵌资源的导出工具；带脚本和动画的 SVG 也只会留下静态画面。

SVG 转 PNG 应该选几倍？

看最终显示或印刷需要多少像素，而不是固定选最大。网页图标 1x 或 2x 通常够用；印刷先按成品尺寸和 DPI 算出目标像素，再除以 SVG 原始宽高。倍率越大文件越大，也更容易碰到画布上限。

为什么导出的 PNG 缺字体或缺图片？

因为 SVG 被当作图片加载时，不能读取外部字体、外链图片和远程 CSS，脚本也不会执行。把文字转成路径、图片改成 base64 内联，或改用支持内嵌资源的工具，通常就能解决。

SVG 转 PNG 后还能无损放大吗？

不能。PNG 是位图，放大后只会变糊；需要继续无损缩放就保留 SVG 原件，或按更大的倍率重新导出。PNG 适合交付和固定尺寸使用，不适合当作可无限放大的母版。