# SVG转PNG教程：矢量图一键导出高清位图

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/svg-to-png-guide


![图片](/api/file/download?path=article/202607/1783913049386_2938.png)

![图片](/api/file/download?path=article/202607/1783913061825_8560.png)

![图片](/api/file/download?path=article/202607/1783913074095_8069.png)

## 一、工具简介

SVG 转 PNG 是一款把矢量图导出为高清位图的在线工具。SVG 在网页上很好用，但做 PPT、发微信、插 Word 时往往需要 PNG 格式，这个工具就是解决这个"最后一公里"的：

- **两种输入方式**：上传 SVG 文件（最大 5 MB），或直接把 SVG 源码粘贴到代码框；
- **尺寸完全可控**：自定义输出宽高，一键按宽度等比同步高度，再也不怕导出图变形；
- **背景可选**：透明、白色、黑色三种预设，还能输入任意颜色值；
- **高清缩放**：1×、2×、4× 三档缩放，导出的 PNG 比原始尺寸清晰数倍；
- **批量转换**：多个 SVG 文件一次性全部转成 PNG。

整个转换在浏览器本地完成，文件不会上传到服务器。

## 二、第一步：上传 SVG 文件

打开工具后，左侧上方是文件上传区，点击选择或把 SVG 文件拖拽进去即可（页面自带一个示例 SVG，可以直接拿来练手）。如果你手里只有一段 SVG 代码，粘贴到「SVG 源码」文本框里效果完全一样。

文件载入后，右侧会同时出现「SVG 预览」和「PNG 预览」两张图，上矢量下位图，转换效果一目了然。

![第一步：上传 SVG 文件](/api/file/download?path=article/202607/1783913049386_2938.png)

## 三、第二步：设置尺寸、背景与缩放

上传后建议按使用场景调一下输出参数：

- **输出宽度/高度**：默认读取 SVG 原始尺寸，可手动修改；改完宽度点「根据宽度同步高度」即可等比缩放，不会拉伸变形；
- **背景色**：「透明」适合图标和 Logo，「白色」适合插入文档，也可以输入十六进制色值自定义；
- **缩放倍数**：选 2× 或 4× 可导出高清图。例如 800×600 的 SVG 选 2×，实际输出就是 1600×1200，页面会实时显示最终尺寸。

![第二步：设置尺寸、背景与缩放](/api/file/download?path=article/202607/1783913061825_8560.png)

## 四、参数说明

| 参数/控件 | 类型 | 说明 |
| --- | --- | --- |
| 文件上传区 | 文件选择器 | 点击或拖拽单个 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 编码，省去再转一道。

![第三步：下载 PNG 成品](/api/file/download?path=article/202607/1783913074095_8069.png)

## 六、常见问题

**Q1：导出的 PNG 模糊怎么办？**
把缩放倍数调到 2× 或 4×，或直接把输出宽高设为显示尺寸的 2 倍，位图清晰度立刻提升。

**Q2：透明背景导出后变黑？**
PNG 本身支持透明，黑色背景通常是看图软件把透明显示成了黑色。插入网页或文档后透明区域会正常显示。

**Q3：SVG 里有外链图片或字体，导出会丢吗？**
工具在浏览器中渲染 SVG，外链资源需要能正常加载才会出现在导出图中，建议把关键资源内联到 SVG 里。

**Q4：一次能转多少个文件？**
单文件最大 5 MB；批量转换可一次选择多个 SVG，逐个导出 PNG。

## 七、总结与相关工具

SVG 转 PNG 把"预览—调参—导出"压缩到一个页面，尺寸、背景、清晰度全可控，还有批量转换和 Data URL 复制，是设计师和前端工程师处理矢量素材的常备工具。

相关工具推荐：

- [图片转矢量](/tools/image_to_svg)：反向操作，位图一键转 SVG
- [图片压缩](/tools/image_compress)：导出的 PNG 太大？在线压缩体积
- [图片 Base64 互转](/tools/image_base64)：PNG 与 Base64 字符串互转
- [占位图生成器](/tools/placeholder_image)：快速生成各种尺寸的占位图

现在就[立即使用 SVG 转 PNG 工具](/tools/svg_to_png)，把矢量图变成高清位图！