使用方法
- 打开页面时输入框已预载一段 240 × 160 的示例 SVG（圆角矩形 + 圆 + 文字，共 311 字节），直接可用。
- 把倍率设在 1~8 之间（默认 2），按 Ctrl+Enter（Mac 用 Cmd+Enter）或点「转换并下载 PNG」；Enter 键保留给代码换行。
- 示例按倍率 2 输出 480 × 320 的 PNG：预览画布同步显示，浏览器开始下载文件；只要预览不要文件就点「仅预览」。
- 换自己的图：粘贴完整
<svg>代码，或点「上传 .svg 文件」读入；没有 width/height 时会从 viewBox 推断尺寸。 - 下方尺寸 × 倍率对照表默认 12 行，点「加载更多」追加 12 行；「导出 CSV」带 BOM，「复制对照表」按制表符复制。
这个SVG转PNG能解决什么
平台只收位图：某些素材库、App 上传口、聊天工具不支持 .svg，需要先把矢量图固化成指定尺寸的 PNG，本页一次粘贴出图，倍率自由控制，不用打开桌面设计软件。
高分屏截图发虚：把 SVG 先按 1 倍转成 PNG 再拉伸会糊；本页在栅格化这一步就直接把画布开成 2 倍、4 倍尺寸，矢量边缘按目标分辨率重新计算，4 倍下示例图是 960 × 640 共 614,400 像素，放大后边缘依旧锐利。
需要透明底的图标：SVG 转 PNG 默认保留透明通道（示例图圆角外是透明的），适合做 favicon、App 图标源文件；若 SVG 根元素带背景矩形则输出不透明。
本页只做 SVG → PNG 单向栅格化，不做 PNG 转 SVG（位图描摹是另一类工具），也不做 JPG / WebP 互转——那几个方向在图片格式转换族页面里。
原理与规则说明
SVG转PNG的调用链是固定的三步：第一步把 SVG 源码内联成 data:image/svg+xml;charset=utf-8, + encodeURIComponent(源码) 的 data URI，交给一个 Image 对象；第二步等 Image.decode() 完成（不支持的浏览器回落 onload）；第三步 canvas.width = w × scale、drawImage(img, 0, 0, w × scale, h × scale)，最后 toDataURL('image/png') 导出。
为什么必须绕道 data URI 而不能把页面里的 <svg> 元素直接画进 canvas：drawImage 只接受位图来源（img / video / canvas / ImageBitmap），传入 SVG DOM 元素会抛 TypeError；而独立 <svg> 若没有显式 width/height，作为图像源时内在尺寸未定义，同样失败。data URI + <img> 是规范允许且全浏览器一致的唯一通路。
等 decode() 而不是画完就导出：decode 返回的 Promise 保证图像数据已解码可用，避免 onload 后立即 drawImage 在个别浏览器的首帧空白问题。渲染失败（语法错、截断）走 onerror，本页把失败原因回显而不是静默出白图。
SVG 在 <img> 里运行于「安全静态模式」：外部 <use xlink:href="http…">、外部 <image>、@font-face 引用的网络字体、脚本一律不执行不加载。所以引用外部资源的 SVG 转出来会缺字缺图——本页在转换前扫描源码并提前警告，提示把资源内联（字体转 path，图片转 data URI）。
倍率对清晰度的意义：SVG 是矢量描述，栅格化时按多少像素画一次成型；scale=2 时画布是 480 × 320，圆和文字边缘按 2 倍分辨率重采样，缩小使用时抗锯齿余量充足。反过来「先 1 倍转 PNG 再放大」是在位图上插值，边缘必然发糊——这是栅格化与位图缩放的本质区别，也是本页把倍率做成一级控件的原因。
完整示例（数值仅作演示）
默认示例：预载 SVG 为 240 × 160（311 字节），内联成 data URI 后长 546 字符。倍率 2 → 输出 480 × 320；倍率 4 → 960 × 640；倍率 8 → 1920 × 1280。控件默认倍率 2、正文与对照表首行三处一致。
favicon 示例：把 64 × 64 的 SVG 按倍率 4 转 256 × 256，一次性覆盖 ICO 常用的 16 / 32 / 48 / 256 四档（缩小时由系统插值），对照表第 4 行可查。
无 width 属性示例：只写 viewBox="0 0 120 120" 的 SVG，本页从 viewBox 推断 120 × 120，按倍率 2 输出 240 × 240——与对照表第 2 行同尺寸。
输入范围与对照表
输入范围：SVG 源码 ≤ 2MB（超出提示精简），倍率 1~8、步长 1；输出画布限制单边 ≤ 16,384px 且总像素 ≤ 40,000,000（约 4,000 万），超过会拒绝并给出最大可用倍率。例如 1200 × 630 的社媒封面最高允许 7 倍（8400 × 4410 = 37,044,000 像素），8 倍即越界。
| 输入情形 | 处理 | 提示文案要点 |
|---|---|---|
| 正常 SVG + 合法倍率 | 转换并下载 | 输出尺寸回显 |
| 输入为空 | 拒绝 | SVG 代码不能为空 |
| 语法错误 / 标签未闭合 | DOMParser 报错拒绝 | 附 parsererror 原文 |
| 根元素不是 svg | 拒绝 | 指出当前根元素名 |
| 缺 width/height 且缺 viewBox | 拒绝 | 要求补尺寸属性 |
| 引用外部字体 / 图片 / use | 警告后仍可转换 | 说明安全静态模式会丢弃外部资源 |
| 倍率越界或非整数 | 拒绝 | 给出 1~8 范围 |
| 输出超 16384px 或 4000 万像素 | 拒绝 | 给出最大可用倍率 |
12 行尺寸倍率对照表覆盖图标、横幅、封面等常见用途；「加载更多」追加的 12 行（48 × 48 → 96 × 96 × 192 × 192 等）按同一乘法现算，与首屏 12 行同源。
输入范围、边界与精度说明
每条非法路径的文案：输入框为空提示「SVG 代码不能为空：请粘贴以 <svg 开头的代码，或点『载入示例』」；语法错时附 DOMParser 的 parsererror 文本（含行列号）不吞错；根元素是 <html> 等时提示「根元素必须是 svg：当前是 xxx」；倍率填 0、9、2.5 时分别提示范围与非整数；两个数都超限的输出尺寸拒绝时给出「最大可用倍率 = floor(min(16384/w, 16384/h, sqrt(40000000/(w×h))))」的计算结果。下载失败不存在静默：画布为空时不触发下载。
精度与保真边界：栅格化在整数倍率下逐像素重采样，无累积误差；非整数倍率（本页不允许）会造成像素网格错位。文字渲染使用系统 sans-serif 回落字体，与设计软件里嵌入字体的效果可能有 1~2 像素级的字距差异；对字形有严格要求时先把文字转路径再转换。
尺寸推断顺序：width/height 属性 → viewBox 的宽高 → 拒绝。width 带单位（如 width="240px" 或 width="100%"）时取数值部分；百分比没有内在尺寸，按无 width 处理走 viewBox。
常见误用：在 SVG 里写 <script> 期望转出来的 PNG 带交互——安全静态模式下脚本不执行，位图也不存在交互；另一个误用是拿本页放大已有 PNG，位图放大请用图片缩放类工具，本页的倍率只对矢量源有意义。
常见问题
为什么直接把网页里的 SVG 元素画进 canvas 会失败？
drawImage 的参数必须是位图来源，SVG DOM 元素没有内在位图尺寸，规范不允许直接绘制。标准做法就是本页的路径：序列化 → data URI → Image → drawImage。
转出来的 PNG 字体怎么不对？
SVG 在 img 里是安全静态模式，@font-face 引用的网络字体不会加载，只能回落到系统字体。要完全一致，先把文字转成路径（设计软件的「轮廓化」），再粘贴转换。
倍率设多大合适？
目标显示尺寸除以 SVG 原始尺寸：图标类至少 2 倍（高分屏），印刷或大屏用 4 倍。倍率越大文件越大，960 × 640 以上的 PNG 主要受内存限制而不是画质。
转出来是空白或缺图？
检查 SVG 里有没有外部引用：外部 image、use、字体在安全静态模式下全部被丢弃，本页会在转换前扫描并警告；把资源内联成 data URI 或转成 path 即可。
透明背景会保留吗？
会。PNG 支持透明通道，SVG 画布未覆盖的区域导出后是透明的；如果需要白底，在 SVG 里加一个铺满的背景矩形。
为什么 1200 × 630 的图最多只能 7 倍？
输出像素上限设了 4,000 万：1200 × 630 = 756,000 像素，× 7 = 37,044,000 在限内，× 8 = 48,384,000 已越界，且 9600 × 5040 的 PNG 多数场景用不上，超限只会白白耗内存。
上传的 .svg 文件怎么读进来的？
用 FileReader 读成文本后填入同一个输入框，后续流程与粘贴完全一致；文件不离开浏览器。
转换会上传我的 SVG 吗？
不会。解析用浏览器内置 DOMParser，渲染与导出全在本地 canvas 完成，无网络请求，可在开发者工具 Network 面板自查。
相关工具
SVG转PNG只解决「矢量固化为位图」一个方向，图格式相关的还有这些页面。
- WebP转PNG转换器——拿到 WebP 素材而平台只收 PNG 时的反向转换。
- JPG转PNG——需要透明通道或无损质量时把 JPG 换成 PNG。
- PNG转ICO转换器——图标链路的下一站：栅格化后打成站点 favicon。
- 图片压缩工具——倍率高、尺寸大的输出文件偏大，发布前压一遍。
- 图片转Base64转换器——把转换结果再内联成 data URI 直接嵌网页。
- 转换图片转灰度——需要单色版本图标时先转灰再栅格化。