什么是SVG 转 PNG 转换器？

将矢量SVG文件转换为任意分辨率的PNG、JPEG或WebP位图。选择输出尺寸、格式和背景，然后下载图片。

拖入单个或整批 .svg 文件,实时查看预览,再挑你真正需要的尺寸。宽高比锁定保持比例不乱;背景可选透明或纯色。可导出为 PNG(无损、支持透明)、JPEG(体积更小、白底)或 WebP(现代格式压缩最优)。1x 到 4x 的缩放预设让一张图标一次性输出 retina 和超高清;可选的 1x/2x/3x ZIP 一键打包三种密度。使用 currentColor 的图标会出现内嵌颜色选择器,可在栅格化前重新上色。批量任务会把所有转换结果打包为一个 ZIP 文件下载。

使用方法

1. 把一个或多个 .svg 文件拖入上传区域,或点击浏览选择文件。之后可用「添加更多 SVG」按钮继续追加。
2. 设置输出的宽度和高度（像素），并选择背景颜色（透明或自定义颜色）。
3. 选择格式（PNG、JPEG 或 WebP）和缩放，然后点击转换并按所选尺寸下载图片。

何时使用

• 把 logo 导出成 1024×1024、透明背景的 PNG,放到社交媒体头像。
• 从一个图标 SVG 一次性生成 App 用的 @2x、@3x 高分辨率 PNG 变体。
• 把 D3 或 Mermaid 生成的图表插到只支持 PNG 的 PPT 里。

结果

一位设计师上传了公司标志的SVG文件，将其转换为1024×1024像素、透明背景的PNG图片，用作社交媒体头像。

常见问题

我选的尺寸导出的 PNG 怎么看着有点糊?

要么 SVG 里嵌了位图(<image> 标签引用了 PNG/JPG),要么你选的输出宽度比 viewBox 还小。矢量元素本身放大不糊,但内嵌的位图只能被拉伸,自然会模糊。

我已经取消了「透明」,为什么背景还是黑色?

关闭透明后,选定的背景色会填满画布。如果颜色仍是默认黑或没设置,你看到的就是黑色。常见的应用截图底色用白(#ffffff)即可,或者直接选品牌色。

能导出像 4K 或 8K 那么大吗?

可以,但受浏览器 canvas 上限制约,Chrome、Firefox 一般在 16384×16384 像素左右。内存按 宽×高×4 字节算,8K 渲染期间可能占 200 MB 左右,建议先关掉占内存的标签页。

SVG 中引用的外部字体在导出后还会保留吗?

前提是浏览器里已经加载过这个字体。通过 <link> 引用 web 字体的 SVG,转换时不会去拉取。若想确保字体表现一致,导出前可以把文字转换成路径,或者在系统里安装该字体。

支持 SVG 内部的 CSS 动画或脚本互动吗?

不支持。PNG 是静态格式,SMIL、CSS、JavaScript 动画都会被冻结到第 0 帧的状态。需要导出动画中某一帧的话,请在源应用里跑到那一帧再导出。

相关工具