SVG 转 PNG 在线转换器 自定义像素尺寸、300 DPI 印刷级导出与 100% 本地隐私保护

在浏览器本地将 SVG 矢量文件或 XML 源代码无损光栅化为超清透明背景 PNG。无需上传服务器,支持任意像素宽高指定与商业印刷分辨率写入。

100% 浏览器本地处理 — 文件绝不上传服务器,零隐私泄露风险

将您的SVG文件拖放到此处

或点击浏览

自定义导出像素宽高(可选): ×
常用尺寸预设:
真实生成效果展示

SVG 转 PNG 真实渲染效果对比展示

直观查看不同矢量图形、渐变路径与透明通道在放大倍率及 300 DPI 印刷配置下的真实输出质量。

4倍超清放大 (1024×1024 px) #01

应用图标 SVG 转超清透明底 PNG

原始输入
SVG 矢量源文件 (3.8 KB, viewBox="0 0 256 256")
生成结果
32位透明通道 PNG (1024×1024 px, 31.4 KB, 72 DPI)

在矢量数学坐标系下直接放大 4 倍后再执行画布光栅化。贝塞尔曲线边缘锐利无锯齿,完整保留 8 位 Alpha 半透明抗锯齿通道,在深色或浅色 UI 背景上均完美贴合。

300 DPI 商业印刷级 (2400×3000 px) #02

品牌主视觉矢量图转高精度印刷物料

原始输入
SVG 印刷画板 (14.2 KB, viewBox="0 0 800 1000")
生成结果
高清印刷 PNG (2400×3000 px, 186.5 KB, 含 300 DPI pHYs 元数据)

按 2400×3000 像素(对应 8×10 英寸 @ 300 DPI)精准渲染,并在 PNG 文件头写入标准 pHYs 物理像素密度块(11,811 像素/米),导入 InDesign 或印刷排版软件即可识别真实物理尺寸。

自定义社媒横幅 (1200×630 px) #03

内联 SVG 架构图代码转纯白底高清配图

原始输入
内联 <svg> XML 代码片段 (6.1 KB, 原生透明)
生成结果
纯白背景 PNG (1200×630 px, 42.8 KB, #FFFFFF 填充)

直接通过“粘贴 SVG 代码”标签页载入前端组件中的内联代码,并合成纯白(#FFFFFF)背景层,彻底解决透明图表在深色模式聊天软件、微信公众号或文档中文字反色看不清的问题。

一、解决什么具体问题

这款 SVG 转 PNG 工具能解决哪些具体问题?

虽然 SVG 是网页端无限缩放的理想格式,但绝大多数办公软件、电商后台和印刷印前系统并不支持直接导入 XML 矢量文件。本工具在本地为您提供零失真的格式转换方案:

电商平台、公众号与内容管理系统上传兼容

淘宝、亚马逊商品图、微信公众号图文、知乎以及各类企业 CMS 出于防跨站脚本(XSS)安全限制,严禁上传 .svg 文件。只需几秒即可将矢量 Logo 转为高兼容性的透明 PNG。

300 DPI 商业印刷、贴纸制作与包装打样

普通浏览器右键另存图片仅有 72 DPI 屏幕分辨率,印刷出来边缘发虚。通过自定义高像素宽高并注入 300 DPI 物理元数据,可直接交付给数码直喷(DTG)、不干胶贴纸厂或印前排版使用。

前端开发与 UI 设计师的代码快速转图工作流

从网页源码、React/Vue 组件或图标库复制出一段 <svg>...</svg> 代码却没有独立文件?无需新建文本文件保存,直接粘贴代码即可实时渲染并导出指定尺寸的 PNG 资源。

二、需要准备什么输入

转换前需要准备什么输入文件或代码?

为了确保浏览器 HTML5 Canvas 引擎在光栅化时获得准确的几何比例与字体样式,请确认您的输入满足以下规范:

标准 .svg 矢量文件或完整 <svg> XML 源码

支持拖拽上传符合 SVG 1.1 / 2.0 规范的 .svg 文件,或直接粘贴以 <svg> 开头、</svg> 结尾的 XML 代码。若是压缩格式 .svgz,请先解压为普通 .svg。

包含有效的 viewBox 或明确宽高属性

根级 <svg> 标签应带有 viewBox="0 0 W H" 或 width/height 属性,以便解析器精准计算原始纵横比与画板边界。

特殊字体需提前转曲(创建轮廓)

如果 SVG 内包含非系统自带的商业字体(<text> 标签),建议在 Illustrator 或 Figma 中先执行“文字转曲/拼合路径”,避免转换时回退为默认宋体或黑体。

内嵌图片需使用 Base64 编码而非外部链接

受浏览器安全沙箱策略保护,SVG 内部通过 http:// 链接引用的外部位图会被拦截;如有嵌入位图,请确保已转为 data:image/png;base64 内联格式。

三、具体操作步骤

SVG 转 PNG 具体操作步骤

1

第一步:上传 SVG 文件或粘贴 SVG 源码

将一个或多个 .svg 文件拖入上传框(也可点击“加载示例 SVG”体验),或者切换至“粘贴 SVG 代码”选项卡直接输入 <svg> 源码。

2

第二步:设置放大倍率、自定义像素或 300 DPI

选择分辨率倍率(1x 原尺寸、2x 视网膜屏、4x 超清),或在自定义尺寸框输入精确的像素宽度与高度(支持锁定纵横比),并按需切换 72 / 150 / 300 DPI。

3

第三步:选择透明背景或自定义纯色填充

默认保持“透明”以输出 32 位 RGBA 透明底图片;如需用于不支持透明的平台,可一键切换纯白、纯黑或通过取色器指定任意十六进制背景色。

4

第四步:点击开始转换并下载 PNG 结果

点击“开始转换”按钮,浏览器将在毫秒间完成本地画布渲染。您可单独下载每张 PNG,或一键打包下载为 ZIP 压缩包。

四、生成结果怎么用

生成的 PNG 图片可以用在哪些地方?

导出的每一张 PNG 均为无损压缩的 32 位真彩色(含 Alpha 通道)标准图像,可直接无缝投入以下下游场景:

移动端 App 开发与高清 UI 切图交付

将导出的 @2x、@3x 或 @4x 透明 PNG 图标直接放入 iOS Xcode Assets、Android Drawable 目录、微信小程序或游戏引擎贴图资源库中。

Word 文档、PPT 演示文稿与 PDF 标书排版

解决旧版 Office、WPS 或 PDF 生成工具插入 SVG 后线条错位、渐变丢失的问题,确保在任何电脑上打开文档都能呈现清晰锐利的矢量级图表。

线下物料印刷、文化衫印制与周边定制

携带 300 DPI pHYs 元数据的高像素透明 PNG 可直接提交给印厂制作亚克力立牌、刀模贴纸、丝网印刷 T 恤及高档画册。

五、哪些情况效果会不好(避坑指南)

哪些情况转换效果会不好?(边界场景与避坑指南)

基于浏览器本地渲染的机制受限于系统字体库与显卡显存上限,遇到以下异常情况时请按对应方案排查:

转换后的文字字体发生改变或退化为默认字体

原因分析:

出于隐私安全限制,浏览器的 SVG 图像渲染沙箱禁止在转换过程中联网加载外部 @font-face 网页字体文件。

解决方法:

在设计软件(Illustrator 快捷键 Ctrl+Shift+O / Figma 快捷键 Ctrl+E)中将所有文字图层转换为矢量路径(轮廓)后再导出 SVG。

导出的 PNG 图形显示不全、被裁切或缩在左上角

原因分析:

原始 SVG 代码缺失 viewBox 属性,或者图形路径坐标超出了画板(Artboard)声明的宽高范围。

解决方法:

先使用本站的“SVG 在线查看器 (/svg-viewer/)”检查 viewBox 坐标,或在根级 <svg> 标签补全正确的 viewBox="0 0 宽度 高度" 属性。

设置超大像素(如超过 16,384 × 16,384 px)时导出失败

原因分析:

主流桌面与手机浏览器的 WebGL/Canvas 硬件加速纹理存在单边 16,384 像素或总面积约 2.68 亿像素的内存保护上限。

解决方法:

请将单边输出像素控制在 8192 px 以内(对于常规印刷,3600×4800 px 即已满足 12×16 英寸 300 DPI 大幅面需求)。

六、和相关工具有什么区别

本工具与相关转换工具有什么区别?

了解“单文件精细 SVG 转 PNG”与“大批量转换器”及“传统云端上传工具”的核心技术差异,选择最适合您当前任务的方案:

对比维度 / 场景 SVG 转 PNG 转换器(当前工具) SVG 批量转换器 (/batch-converter/) 传统云端服务器转换网站
核心适用场景 追求精确像素宽高指定、粘贴 SVG 源码转换及写入 300 DPI 印刷元数据 一次性拖入数十至数百个 SVG 图标,批量导出为 PNG/JPG/WebP 压缩包 需将文件上传至远程服务器排队转换,通常限制每日转换次数与文件大小
尺寸与 DPI 控制粒度 支持自定义任意像素宽高(px)、1x-4x 倍率预设及 72/150/300 DPI 元数据写入 支持统一倍率缩放(1x/2x/4x)与自定义文件名前缀/后缀规则 多数仅固定按 72 DPI 屏幕分辨率导出,无法修改物理 DPI 块或精确像素
直接粘贴代码支持 内置“粘贴 SVG 代码”编辑器,支持直接渲染内联 <svg> 代码片段 仅支持文件与文件夹拖拽上传(专为本地图标库批量工作流设计) 极少支持,必须先在电脑上手动新建并保存为 .svg 文件后才能上传
数据隐私与处理速度 100% 浏览器本地 Canvas 渲染,文件零上传,毫秒级即时响应 100% 本地并行转换并通过客户端 JSZip 自动打包 商业未公开设计稿需上传第三方云端,存在数据留存风险与网络上传等待延迟
七、常见问题怎么处理

常见问题解答与故障排查 (FAQ)

如何计算 300 DPI 印刷所需的准确 PNG 像素尺寸?

请使用标准印前换算公式:物理英寸 × 300 = 目标像素(或:毫米尺寸 ÷ 25.4 × 300 = 目标像素)。例如,若您需要印制一张 10×15 厘米(约 3.94×5.91 英寸)的 300 DPI 贴纸,只需在“自定义导出像素宽高”中输入宽度 1181 px、高度 1772 px,并在下拉框选择“300 DPI(高清商业印刷标准)”,导出的 PNG 即可同时拥有充足的物理像素与正确的 300 DPI 文件头信息。

将小尺寸 SVG 放大 4 倍导出为 PNG 后,画面会模糊或出现马赛克吗?

绝对不会。本工具并非对位图进行拉伸插值,而是先在矢量数学空间中将 SVG 路径与曲线按目标分辨率(如 4x 或 4000px)重新计算坐标,最后才在高清画布上执行光栅化着色,因此无论放大多少倍,线条边缘依然保持纤毫毕现。

转换未发布的公司 Logo 或机密架构图是否安全?文件会上传吗?

100% 安全。本工具基于纯前端 Web Canvas API 构建,所有文件解析、光栅化绘制与 PNG 编码全部在您的本地浏览器内存中完成,没有任何一个字节会发送到外部服务器。您甚至可以在打开网页后断开网络连接离线使用。

为什么导出的透明 PNG 在某些看图软件里显示为黑底或白底?

部分系统自带看图器(如旧版 Windows 照片查看器或微信预览)会自动在透明区域下方衬入白色或深色背景以便观察。只要您在本工具中勾选了“透明”背景并点击“下载”按钮保存,文件本身的 32 位 Alpha 透明通道就是完整无损的,导入 PS、Figma 或网页后即可看到透明效果。

导出高分辨率 PNG 后文件体积较大,如何在不损失透明度和尺寸的前提下瘦身?

高清 32 位 PNG 默认采用无损压缩。下载 PNG 后,您可以直接点击页面底部的“PNG 在线压缩工具 (/png-compressor/)”,在不改变任何像素宽高和半透明边缘的前提下,通过智能色彩量化缩减 50%–75% 的文件体积。

上下游相关工具推荐

每个工具专注解决一个具体需求,点击下方卡片可切换至对应工具页面。

分享此工具

帮助他人发现这个免费且私密的SVG转PNG转换器。