svg 转换 png

快速把 SVG 转换为 PNG 图片。支持透明背景保留、外部边距、颜色着色、紧凑裁剪与批量导出。

释放文件以导入 SVG
支持单选或批量拖拽 SVG 文件
共 {{ images.length }} 个图像
点击或将 SVG 文件拖拽到此处
支持多选文件批量导入,毫秒级快速本地解析,不上传服务器更安全
输出格式:
品质: {{ Math.round(globalQuality * 100) }}%
#{{ idx + 1 }} .{{ globalFormat }}
原始标签宽高: {{ img.specified.width || '未指定' }} × {{ img.specified.height || '未指定' }}
像素换算: {{ img.absolute.width ? (img.absolute.width + 'px') : '-' }} × {{ img.absolute.height ? (img.absolute.height + 'px') : '-' }}
ViewBox: {{ img.viewBox.width ? (img.viewBox.x + ' ' + img.viewBox.y + ' ' + img.viewBox.width + ' ' + img.viewBox.height) : '无' }}
图形包围盒: {{ img.contents ? (Math.round(img.contents.width) + ' × ' + Math.round(img.contents.height)) : '-' }}
编辑 SVG 源代码(修改后自动重新解析并更新渲染):
⚠️ {{ img.errorMessage }}
输出尺寸 (px):
×
外部边距:
px
紧凑裁剪:
填充适应 (Fit):
背景颜色:
图形着色 (Color):
{{ img.width }} × {{ img.height }} px

怎样把SVG转换为PNG图片,并保持透明背景?

在前端开发、UI设计、插画制作以及日常办公场景中,SVG 矢量图以其无限缩放、不失真和体积小巧等特性成为图标与矢量图形的标准。但在日常发布至社交平台、制作 PPT、嵌入文档或分发给老旧系统使用时,通用的透明 PNG 位图往往是兼容性最好的选择。本文将为您详细解析 SVG 转换为透明 PNG 的核心原理、具体操作步骤及常见避坑技巧。

一、SVG 与 PNG 的透明度核心原理

SVG(Scalable Vector Graphics)本质上是基于 XML 的矢量图形描述语言。在标准规范中,SVG 根画面的背景默认就是透明的,除非代码内显式绘制了背景矩形(如 <rect fill="#ffffff" ...>)。

而 PNG(Portable Network Graphics)是一种光栅位图格式,其最大的优势之一就是支持完整的 RGBA 32位色深,包含 8 位的 Alpha 透明度通道,能实现 256 级的平滑半透明渲染。将 SVG 转为 PNG 时,只要通过支持 Alpha 通道的 Canvas 画布进行光栅化映射,且不人为填充底层纯色,就能无损保留完整的透明背景。

二、5 步快速完成转换与透明背景保留

1
导入 SVG 矢量文件

点击上方“上传 SVG”按钮或直接将一个或多个 SVG 文件拖拽至页面区域。系统将自动在浏览器本地极速解析矢量文件尺寸与图层结构,支持单选与批量多选。

2
保持背景色留空

在各图像配置卡片中,“背景颜色”输入框保持留空即代表完全透明。工具默认支持黑白棋盘网格预览,您可以点击右上角“切换深色/浅色预览”快速检验图标边缘与透明通道效果。

3
设定高清导出分辨率

根据您的最终应用场景自由调节输出宽度和高度(如 512px、1024px 或 2048px 高清 Retina 尺寸)。开启“保持宽高比”开关可确保图标缩放时不拉伸变形。

4
去除多余留白与外边距微调

若原 SVG 画布周围存在冗余空白,可勾选“去除留白”,算法将自动探测图层实际边界并紧凑裁剪;如需留出留白安全区,直接调节“边距 (Padding)”数值即可。

5
导出透明 PNG 图片

确认效果满意后,点击“下载 PNG”即可直接保存为高保真透明位图。您也可以点击“复制 PNG”免去文件存盘步骤,直接粘贴至 Figma、Sketch、Photoshop 或即时通讯软件中;批量多图时可使用顶部“打包下载 ZIP”一键获取。

三、为什么转换后背景会出现黑底或白底?

许多用户在使用传统转换软件时,经常遇到“原图是透明的,转换后却变成黑色或白色背景”的问题。主要原因通常有以下几种:

01
格式选择错误

JPEG/JPG 格式本身不支持 Alpha 透明通道,转换时渲染引擎会自动将透明部分填充为纯白或纯黑色底。转换透明图必须确保选择 PNG 或 WebP 格式。

02
SVG 内部包含底色矩形

部分来自设计软件导出的 SVG 源码中,第一层往往自带了一个不透明的背景层(如 <rect width="100%" height="100%" fill="#fff"/>)。可点击工具中的“源码”展开查看并删除该底色节点。

03
软件预览器的视觉误导

某些操作系统内置的照片查看器在显示透明 PNG 时,窗口默认用黑色或纯白作为视窗底板,导致看起来像有底色。将图片置入深浅交替的棋盘格或实际设计软件中即可确认其实际透明度。

四、常见问题解答

SVG 转换后的 PNG 图片放大后会失真模糊吗?
位图在超过其原有像素尺寸后放大确实会出现锯齿。因此在转换时,建议在尺寸输入框中直接填写您需要的最大尺寸(例如 1024×1024 甚至 4096×4096)。本工具基于原始矢量代码在指定像素下实时高清光栅化,能输出细节极致锐利的透明 PNG。
批量转换数十个 SVG 图标时能否统一保持透明?
完全支持。默认情况下所有导入的文件背景色均为空(纯透明)。若您需要统一调整批量图标的尺寸或内边距,只需开启顶部的“同步批量修改”开关,调整其中一个即可同步至全部图像,并支持一键打包 ZIP 下载。
转换过程中我的矢量文件会上传到服务器吗?
不会。本工具核心转换逻辑采用现代浏览器原生 HTML5 Canvas 与 Web API,全部计算均在您的本地设备浏览器内部即时完成,没有网络上传与服务器存储过程,既能保护您的设计隐私与商业数据安全,转换速度也更为迅速。