直接答案
SVG 转 PNG 纯前端转换利用浏览器内存安全消毒矢量 XML 标记,从 viewBox 提取固有尺寸,直接将矢量路径光栅化到透明 RGBA 画板缓冲区并编码为无损 PNG,全程无需将文件传输到远程服务器。
如何使用此工具
选择或拖拽 SVG 矢量文件
添加单个或多个 SVG 格式矢量文件至本地工作台的上传区域。
确认透明度与固有尺寸
转换器默认按照 SVG 原始 viewBox 宽高光栅化为透明底 PNG,并自动完成代码消毒。
可选后续图片微调
可在同一工作台内直接执行裁剪、缩放尺寸、旋转或压缩,无需离开页面或重新上传。
导出与一键下载
单独保存转换后的 PNG 图像,或将整个批次一键打包下载为 ZIP 压缩文件。
纯前端内存矢量安全消毒与固有尺寸光栅化原理
可缩放矢量图形 (SVG) 基于 XML 标记与数学坐标描述图形。转换为 PNG 时,必须首先深度解析并消毒 XML 文档树,剔除潜在的可执行脚本、事件侦听器及外部链接资源,随后根据 viewBox 的固有尺寸在 HTML5 画板中精准光栅化矢量路径。最终像素阵列被无损编码为标准 PNG 数据流,完整保留 32 位 RGBA 透明通道。
- 零服务器交互:XML 解析、安全消毒与画板光栅化全程在浏览器内存中运行。
- 安全消毒机制:渲染前彻底剔除恶意脚本、DOM 事件及 foreignObject 外部对象。
- 固有尺寸保真:严格按照源 SVG 的 viewBox 几何比例渲染,杜绝拉伸失真。
- 确定性批量处理:支持最高 20 个 SVG 文件并发转换,具备防重名算法与 ZIP 打包。
实用示例
可缩放矢量品牌商标转为 Web 端高清透明 PNG 图标
输入: 源文件: brand-logo.svg (矢量 XML, viewBox 0 0 800 600, 透明背景, 42 KB)
输出: 转码后: brand-logo-800x600.png (800×600 像素, 32位 RGBA 透明 PNG, 96 KB)
安全消毒并将矢量 Logo 光栅化为高清透明背景 PNG,适用于网站顶部导航、邮件签名与幻灯片展示。
限制
- SVG 转 PNG 是将任意缩放的数学矢量固定为特定像素点阵;将生成的 PNG 放大超出其固有尺寸会产生马赛克模糊。
- 包含 SMIL 或 CSS 关键帧动画的动态 SVG 无法转换为静态 PNG;为防止画面丢失,系统会严格拦截并提示拒绝对其静态化。
常见问题
SVG 转为 PNG 后能完整保留背景透明度吗?
可以。转换器默认完整保留矢量图形的透明 Alpha 通道,输出标准 32 位 RGBA 透明 PNG 格式。
支持转换带有动画效果的动态 SVG 吗?
不支持。包含 SMIL 动画或 CSS 动画的 SVG 文件会被明确拦截,因为光栅化为静态 PNG 会丢弃动画帧并导致图形缺失。
我的 SVG 文件或代码内容会被上传到第三方服务器吗?
绝对不会。所有 SVG 代码消毒、坐标光栅化与 PNG 封装均 100% 在您本机的浏览器内存中执行,任何数据都不会离开您的设备。
权威技术标准与参考文献
- W3C Scalable Vector Graphics (SVG) 2 Specification ↗ — Official W3C recommendation governing SVG document trees, coordinates, and rasterization rendering.
- W3C Portable Network Graphics (PNG) Specification (Third Edition) ↗ — Official standard defining PNG chunk structures, lossless compression, and alpha channel handling.
- MDN Web Docs: Pixel Manipulation with HTML5 Canvas ↗ — Technical documentation for direct ImageData extraction, RGBA buffer access, and client-side rendering.