一、工具简介
SVG 转 PNG 是一款把矢量图导出为高清位图的在线工具。SVG 在网页上很好用，但做 PPT、发微信、插 Word 时往往需要 PNG 格式，这个工具就是解决这个"最后一公里"的：
- 两种输入方式：上传 SVG 文件（最大 5 MB），或直接把 SVG 源码粘贴到代码框；
- 尺寸完全可控：自定义输出宽高，一键按宽度等比同步高度，再也不怕导出图变形；
- 背景可选：透明、白色、黑色三种预设，还能输入任意颜色值；
- 高清缩放：1×、2×、4× 三档缩放，导出的 PNG 比原始尺寸清晰数倍；
- 批量转换：多个 SVG 文件一次性全部转成 PNG。
整个转换在浏览器本地完成，文件不会上传到服务器。
二、第一步：上传 SVG 文件
打开工具后，左侧上方是文件上传区，点击选择或把 SVG 文件拖拽进去即可（页面自带一个示例 SVG，可以直接拿来练手）。如果你手里只有一段 SVG 代码，粘贴到「SVG 源码」文本框里效果完全一样。
文件载入后，右侧会同时出现「SVG 预览」和「PNG 预览」两张图，上矢量下位图，转换效果一目了然。
三、第二步：设置尺寸、背景与缩放
上传后建议按使用场景调一下输出参数：
- 输出宽度/高度：默认读取 SVG 原始尺寸，可手动修改；改完宽度点「根据宽度同步高度」即可等比缩放，不会拉伸变形；
- 背景色：「透明」适合图标和 Logo，「白色」适合插入文档，也可以输入十六进制色值自定义；
- 缩放倍数：选 2× 或 4× 可导出高清图。例如 800×600 的 SVG 选 2×，实际输出就是 1600×1200，页面会实时显示最终尺寸。
四、参数说明
| 参数/控件 | 类型 | 说明 |
|---|---|---|
| 文件上传区 | 文件选择器 | 点击或拖拽单个 SVG，最大 5 MB |
| SVG 源码 | 文本域 | 直接粘贴 SVG 代码，与上传文件等效 |
| 输出宽度/高度 | 数字输入框 | 导出 PNG 的像素尺寸，默认取 SVG 原始大小 |
| 根据宽度同步高度 | 按钮 | 按原始宽高比自动计算高度 |
| 重置示例 | 按钮 | 恢复内置示例 SVG |
| 背景色 | 单选+颜色值 | 透明、白色、黑色预设，支持自定义色值 |
| 缩放倍数 | 数字+按钮组 | 1×、2×、4×，下方实时显示实际输出尺寸 |
| 批量转换 | 文件选择器 | 多选 SVG 文件一次性全部转 PNG |
| 下载 PNG | 按钮 | 导出当前预览的 PNG 文件 |
| 复制 Data URL | 按钮 | 复制 PNG 的 Base64 Data URL，可直接嵌入代码 |
五、第三步：下载 PNG 成品
参数调好后，对照右侧「PNG 预览」确认效果，点击「下载 PNG」即可保存到本地。文件名会自动带上缩放标记（如 test_sample@2x.png），方便区分不同清晰度的版本。
实测一个 400×300 的渐变 SVG，设宽度 800、缩放 2×、白色背景，导出的 PNG 为 1600×1200、RGBA 色彩、约 1.4 MB，放大后边缘依然锐利清晰。如果需要把 PNG 直接嵌进 HTML 或 CSS，点「复制 Data URL」就能拿到 Base64 编码，省去再转一道。
六、常见问题
Q1：导出的 PNG 模糊怎么办？
把缩放倍数调到 2× 或 4×，或直接把输出宽高设为显示尺寸的 2 倍，位图清晰度立刻提升。
Q2：透明背景导出后变黑？
PNG 本身支持透明，黑色背景通常是看图软件把透明显示成了黑色。插入网页或文档后透明区域会正常显示。
Q3：SVG 里有外链图片或字体，导出会丢吗？
工具在浏览器中渲染 SVG，外链资源需要能正常加载才会出现在导出图中，建议把关键资源内联到 SVG 里。
Q4：一次能转多少个文件？
单文件最大 5 MB；批量转换可一次选择多个 SVG，逐个导出 PNG。
七、总结与相关工具
SVG 转 PNG 把"预览—调参—导出"压缩到一个页面，尺寸、背景、清晰度全可控，还有批量转换和 Data URL 复制，是设计师和前端工程师处理矢量素材的常备工具。
相关工具推荐：
- 图片转矢量：反向操作，位图一键转 SVG
- 图片压缩：导出的 PNG 太大？在线压缩体积
- 图片 Base64 互转：PNG 与 Base64 字符串互转
- 占位图生成器：快速生成各种尺寸的占位图
现在就立即使用 SVG 转 PNG 工具，把矢量图变成高清位图！