SVG 转 PNG

把矢量图导出成 PNG，尺寸和倍数自己定。用浏览器自带的渲染器光栅化，所以放大导出不会糊。

SVG 源码

等待渲染

输出设置

输出宽度（px）输出高度（px）倍数

锁定原始宽高比

背景

原图有透明区域时选透明就是透明 PNG；要贴到白色页面上就先铺一层白色，避免看起来发灰。倍数会把宽高一起放大，导出高清图用它。

原始尺寸480 × 270

尺寸来源width / height 属性

viewBox0 0 480 270

宽高比1.778 : 1

要不要补 xmlns不用，源码里已经有

渲染完成后这里会显示 PNG。

SVG 描述的是图形而不是像素，转 PNG 时是按你指定的宽高重新光栅化一次，所以把 100 像素的小图标导出成 1000 像素仍然清晰。这也是这一页和「图片压缩」的区别：那边处理的是已经定死的位图，放大只能插值，这里是重新画一遍。

倍数和尺寸的区别在于谁来算。填 240 像素、2 倍，导出的是 480 像素；填 480 像素、1 倍，结果一样。倍数只是为了省事：想同时导出一套 1x、2x、3x 的资源时不用自己乘。

浏览器渲染独立 SVG 文件时，只加载源码里的内容，不会去请求外部的 CSS、@import 的样式表和 <image> 引用的外链图片。这些样式必须内联到 SVG 里（写进 <style> 或直接写在元素的 style 属性上）才会生效，否则导出的图形会是默认的黑色填充、没有渐变和字体。

字体也是同一个道理：SVG 里的文字用的是打开它的设备的字体。你机器上有思源黑体，导出来就是思源黑体，别人机器上没有就可能换成别的字体，字宽和断行都会变。要绝对一致，就把文字转成路径再导出。

另外 foreignObject 里嵌的 HTML、部分滤镜效果、以及需要脚本计算的动画，在 Image 渲染模式下都不执行，这几种情况会导出空白或者缺内容。动画导出的是第一帧。

SVG 里 viewBox 的坐标系和输出像素是两回事。viewBox 只决定内容怎么缩放和平移，导出多少像素取决于你填的宽高。同一份 viewBox 是 0 0 24 24 的图标，导出 24 像素和导出 240 像素内容完全一样，只是密度不同。

输出的边长上限是 8000 像素。再大内存和 canvas 都可能撑不住，需要更大的图建议分块导出再拼，或者直接用命令行工具（比如 rsvg-convert、Inkscape）处理。