SVG 转 PNG 工具

输出尺寸怎么定

1 倍时按 SVG 根元素声明的尺寸输出，单位按 CSS 绝对长度换算（1in = 96px，1mm = 96/25.4px）：width=“50mm” height=“25mm” 得到 189×94；只写 width=“200” 加 viewBox=“0 0 24 12” 时，高度按 viewBox 比例算成 100；只有 viewBox 时用 viewBox 的宽高；width=“100%” 这类百分比取决于所在页面，改用 viewBox。三者都没有时是 300×150。

绘制前，工具把目标尺寸写进 SVG 的 width、height，缺 viewBox 时补上，浏览器因此按最终分辨率重新渲染矢量，不会把小图拉伸放大。「宽 × 高」与原图比例不同时，图形按 SVG 的 preserveAspectRatio 放置（默认居中），其余部分是背景。

实测：公众号文章配图

微信公众平台「上传发表内容中的图片」接口写明：图片仅支持 jpg/png 格式，大小必须在 1MB 以下。用 draw.io、Figma 画好的 SVG 流程图要先转成位图。下面是 2026-09-30 在 Chrome 152（macOS）里的实测，文件是一张 viewBox=“0 0 1200 520”、三个方框加中文字的流程图：

三种都在 1MB 以内。图里的中文用本机字体渲染（这台机器是苹方）；如果 SVG 用 @import 引了网络字体，工具会在预览下方提示字体没有加载。

从网页复制出来的 SVG

SVG 直接写在 HTML 里时不需要 xmlns，所以从开发者工具或 React 组件里复制出来的代码常常没有它。这样的代码单独保存后，浏览器无法把它当成图像打开。实测一段 <svg viewBox=“0 0 1024 1024” width=“200” height=“200”> 开头的图标代码：工具补上 xmlns=“http://www.w3.org/2000/svg” 后输出 200×200、3,675 字节的 PNG，并在预览下方注明已补全。

另一种常见错误是文字里夹着  。它是 HTML 实体，XML 里没有定义，工具会报「第 N 行第 M 列」并建议改成  。属性引号没闭合、结束标签写错这类语法错误，也会给出行列和中文原因。

转换前想先压缩 SVG，可以用 SVG 压缩优化；要生成整套网站图标（ICO、apple-touch-icon）用 Favicon 生成器；要把 PNG 内嵌进 CSS 或 HTML，用图片转 Base64。

与同类工具对比

2026-09-30 用同一组文件在桌面版 Chrome 实测。「只写宽度」指 width=“200” viewBox=“0 0 24 12”，1 倍应为 200×100。

selfboot 对缺 xmlns 的文件提示「请检查 SVG 是否引用了跨域图片、远程字体或浏览器不支持的内容」，没有指出真正原因；svgtopng.com 对含 <foreignObject> 的文件输出一张全透明 PNG，也不报错。两者都在浏览器本地转换，svgtopng.com 一次最多 20 个文件。

限制

• 渲染用的是浏览器自己的 SVG 引擎，Chrome、Firefox、Safari 的输出在文字抗锯齿和滤镜上可能略有差别。
• 文字用本机字体，换一台电脑转换，字体可能不同；要固定字体，把字体以 data: URI 写进 @font-face。
• 含 <foreignObject> 的 SVG 在 Chrome（实测 152 版）和同内核的 Edge 里无法导出。
• 带 SMIL 动画的 SVG 只保存第一帧。
• 浏览器不能从 canvas 编码 WebP 时会改为输出 PNG，工具按实际格式保存并提示。
• 不支持 .svgz（gzip 压缩的 SVG），请先解压。

命令行批量转换

文件多或要放进构建流程时，可以用 Node.js 库 sharp，它用 librsvg 渲染 SVG。用 sharp 0.34.5（librsvg 2.61.2）对一个只有 viewBox 的 24 × 24 图标实测：

import sharp from 'sharp'; // npm install sharp

await sharp('icon.svg').resize(512, 512).png().toFile('icon-512.png');   // 512 × 512
await sharp('icon.svg', { density: 288 }).png().toFile('icon@4x.png');   // 4 × the SVG size

不写 resize 或 density 时，PNG 就是 SVG 自身的尺寸（这里是 24 × 24）。默认密度为 72，所以 density: 288 得到 96 × 96。librsvg 和浏览器是不同的渲染器，依赖网页字体或 CSS @import 的文字可能显示不同，整批转换前先拿一个文件和本页的结果对比。