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



![图片](/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)，把矢量图变成高清位图！

免费在线SVG转PNG工具，上传SVG或粘贴源码，自定义尺寸、背景色与缩放倍数，一键下载高清PNG，浏览器本地处理，附详细教程。

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