一句话原理
SVG 是用数学公式描述的图形——「在这里画一个半径 40 的圆」。无论放大多少倍，浏览器都会重新按公式算一遍，所以永远清晰。
PNG、JPG 是位图——它们记录的是「第 37 行第 92 列这个像素是什么颜色」。放大就是把已有的像素撑开，细节不会凭空长出来。所以SVG 转位图，清晰度完全取决于你转的时候设了多大的尺寸。
尺寸该设多大
判断方法很简单：看这张图最终会以多大显示。
| 用途 | 输出尺寸建议 |
|---|---|
| 网页小图标（24～32px 显示） | 64×64 或 96×96 |
| 网页配图（600px 显示） | 1200px 宽（2 倍图） |
| 文章头图 / 封面（1200px 显示） | 2400px 宽 |
| 打印（A4 满幅） | 2480×3508 像素（300 DPI） |
| 微信 / App 分享图 | 1200×630 |
核心规律：按显示尺寸的 2 倍出图。手机和笔记本大多是高分屏，2 倍图才有细腻的边缘。再大就没必要了，只会白白增加体积。
为什么叫「2 倍图」
假设一个图标在网页上占 24 像素宽。在高分屏上，这 24 像素其实由 48 个物理像素组成（这就是所谓的 Retina / 2×）。如果你只转了 24×24 的位图，浏览器就得把它放大到 48 去显示，边缘立刻发虚。转成 48×48 就正好一一对应。
透明背景会保留吗
会。SVG 本身没有背景，转成 PNG 或 WebP 时透明区域会完整保留。但转成 JPG 就不行了——JPG 没有透明通道，背景会被填成你指定的颜色（默认白色）。
什么情况该保留 SVG
- 图标、Logo、简单插画：网页上直接用 SVG 最好，几 KB 就够，还能用 CSS 改颜色。
- 需要交给别人用（PPT、Word、某些设计软件不认 SVG）时，才转成 PNG。
- 要做 favicon，转成 ICO 最合适——和 PNG 一样支持透明，还能一次装多个尺寸。
一个常被忽略的细节
如果 SVG 里用了外部字体或外链图片，转位图时这些内容可能丢失，因为浏览器加载 SVG 时不会去下载外链资源。稳妥的做法是：把文字转成路径（各大设计软件都有「轮廓化」功能），或者把外部图片嵌进 SVG 里，再执行转换。
动手试试
打开SVG 转 PNG，把文件拖进去，在「最大宽度」里填你需要的尺寸（比如 2400），再点下载。