在线SVG转PNG工具

SVG与PNG：您应使用哪一个？

SVG(可缩放矢量图形)是一种矢量格式,即用数学方式描述形状的 XML 标记。SVG 中的圆是「在 (x, y) 处绘制半径为 R、填充颜色为 F 的圆」,是指令,而非像素。浏览器根据你显示 SVG 的任意尺寸渲染指令,因此它在 1x、2x、3x 及以上都保持清晰。PNG(便携式网络图形)是栅格格式,即具有固定颜色值的固定像素网格。PNG 是当你将 SVG「冻结」在特定分辨率时所获得的。将 SVG 转换为 PNG 称为栅格化:选择目标像素网格,并在该固定大小下渲染矢量指令,之后结果就是带有所有相关尺寸约束的普通栅格图像。

SVG 由 1998 年成立的 W3C SVG 工作组开发;SVG 1.0 于 2001 年 9 月 4 日成为 W3C 推荐标准;SVG 1.1 于 2003 年 1 月 14 日跟进,在接下来的十年中是主导版本;SVG 1.1 第二版于 2011 年 8 月 16 日发布;SVG 2 于 2018 年 10 月 4 日达到 Candidate Recommendation,但已陷入停滞,截至 2026 年仍是 CR 而非完整推荐标准。PNG 于 1996 年 10 月 1 日成为 W3C 推荐标准,并于 1997 年 3 月成为 IETF RFC 2083;此格式自此稳定。

为什么要将SVG转换为PNG

• 电子邮件客户端放弃 SVG 支持。Microsoft 从 2025 年 9 月开始在 Outlook for the web 和新的 Outlook for Windows 中退役 inline SVG 支持,推出于 2025 年 10 月完成,inline SVG 现在渲染为空白空间。SVG 附件仍可使用,但之前嵌入 SVG 徽标的 inline 样式电子邮件模板需要 PNG 后备。Gmail 的 Web 界面渲染 SVG 良好;Apple Mail 也是;主要中断在 Microsoft 一侧。
• 社交媒体平台。Twitter/X、Instagram、Facebook、LinkedIn 要么直接拒绝 SVG 上传,要么在显示前将其压缩并重新编码为 PNG/JPEG。预先按平台首选尺寸(Open Graph 用 1200x630,Instagram 用 1080x1080)栅格化可绕过它们的有损自动转换。
• 应用图标生成。iOS 应用图标必须是 PNG 1024x1024(App Store 列表),加上各种特定设备的尺寸;Android 自适应图标在启动器内以 432x432 渲染(xxxhdpi 下的 108dp),Play Store 列表用 512x512;PWA manifest 图标通常需要 192x192 和 512x512。这些都不接受 SVG。
• 按需印刷和印前。Printful、Redbubble、Society6、RedPrint 以及大多数按需印刷服务要求 PNG(或 PDF)以特定分辨率,通常为目标物理尺寸的 300 DPI。他们的上传流程不接受 SVG。
• 旧 CMS 和应用。较旧的 WordPress 安装、旧管理工具、早于浏览器 SVG 支持的文档编辑器,凡是「必须是 PNG」是硬性要求的地方。
• Discord 表情和类似的。Discord 的自定义表情上传需要 PNG(或动画 GIF 用于动画表情);推荐尺寸 128x128,文件大小上限 256 KB。不接受 SVG。

转换在你的浏览器中如何工作

Canvas API 栅格化技术很直接但有微妙之处。标准管道:通过 Blob URL(URL.createObjectURL(svgBlob))或直接作为 data URI(data:image/svg+xml;base64,...)将 SVG 加载为 Image 元素;等待 onload 事件;在所需输出尺寸创建画布;调用 ctx.drawImage(image, 0, 0, width, height) 以所选大小栅格化 SVG;通过 canvas.toBlob('image/png') 导出。浏览器 SVG 渲染器在此栅格化过程中正确处理渐变、蒙版、滤镜、文本和大部分 SVG 功能集。三个注意事项很重要。外部资源在 CORS 下失败:引用外部图像(<image href="https://other-domain.com/photo.jpg">)或外部字体的 SVG 如果跨域服务器不返回适当的 CORS 头,则可能无法加载,画布变为「tainted」,toBlob 抛出 SecurityError。将图像嵌入为 data URI,字体嵌入为 @font-face 且 src 为 data URI 以避免此问题。包含 <script> 标签的 SVG 不会执行,当作为 Image 加载时,浏览器的图像解码器出于安全考虑剥离脚本上下文。SMIL 动画被压缩为 time=0 的单帧;如果 SVG 依赖动画来呈现其视觉状态,栅格化的 PNG 不会捕获它。跨浏览器像素差异:Chrome、Firefox 和 Safari 由于各自矢量渲染器的差异,对同一 SVG 产生略有不同的栅格化输出;对于生产图标,渲染一次并发布 PNG,而不是依赖运行时的每浏览器转换。

选择正确的输出分辨率

SVG 没有固有分辨率,选择权在你。常见目标:iOS App Store 列表图标1024x1024;Android Play Store 列表图标512x512(启动器内自适应图标为 432x432,设计在 264x264 安全区内);PWA manifest 图标192x192 和 512x512;favicon 历史上为 16x16、32x32、48x48(现代 favicon.ico 捆绑全部三种尺寸;现代最佳实践为支持的浏览器提供 icon.svg,加上 192x192 apple-touch-icon.png 后备);Open Graph 社交卡片1200x630;Twitter 卡片1200x675;Instagram 正方形1080x1080;Discord 表情128x128;Slack 表情128x128;300 DPI 打印需要 3 倍英寸维度的像素(4 英寸徽标打印需要 1200x1200)。对于 Retina 质量的屏幕渲染,瞄准显示尺寸的 2 倍,100x100 显示的图标应该导出为 200x200 以在 Retina 屏幕上保持清晰。

如何使用此转换器

1. 提供 SVG。将 .svg 文件拖放到上传区,或将原始 SVG 标记粘贴到文本区。两种方式工作方式相同。
2. 设置输出维度。以像素为单位的宽度和高度;锁定纵横比开关在你改变一个维度时保持比例。最大 8192x8192(大多数现代浏览器上的画布尺寸限制;某些硬件限制在 4096 或 8192)。
3. 选择背景。透明(默认,保留 SVG 的 alpha 通道)、纯白色、纯黑色或任何自定义颜色。当目标不支持透明度时有用(某些旧打印环境)。
4. 转换并下载。转换按钮按所选大小栅格化 SVG 并显示预览;下载将 PNG 保存到你的设备。

诚实的范围:此工具做什么和不做什么

此工具将单个 SVG 按所选大小栅格化为单个 PNG。它不生成应用商店所需的完整多尺寸图标集(仅 iOS 就需要 1024x1024 + 180x180 + 167x167 + 152x152 + 120x120 + 87x87 + 80x80 + 60x60 + 58x58 + 40x40 + 29x29 + 20x20),为此,请使用 RealFaviconGenerator 或 App Icon Generator 等专用工具。它不优化生成的 PNG(使用 SVG Optimizer 工具先清理源 SVG;对于 PNG 优化使用单独的压缩器)。它不捆绑多尺寸 favicon.ico 输出。它不动画化,导出的 PNG 是单帧,即使 SVG 有 SMIL 动画。对于从一个 SVG 批量生成许多尺寸,使用 sharp-cli(Node.js)或 resvg-cli(Rust)等 CLI;它们所做的每尺寸转换与此工具相同,只是可脚本化。

隐私:为什么仅浏览器在这里重要

SVG 文件通常包含专有品牌资产、进行中的徽标、内部产品图标或受 NDA 约束的设计师提供的源文件。服务器端转换服务(CloudConvert、Online-Convert、Convertio)将你的 SVG 上传到他们的基础设施,在那里它存在于日志中。此工具通过 Canvas API 在你的浏览器中运行整个栅格化管道,在单击转换时在 DevTools 的 Network 标签中验证,或在页面加载后将其离线(飞行模式),转换器仍然工作。对于未发布的品牌作品、内部产品图标、受 NDA 约束的设计师文件或你不希望被复制到陌生人硬盘上的任何 SVG 都很安全。

常见问题

为什么将 SVG 转换为 PNG 而不是直接使用 SVG?

对于大多数现代浏览器,你不必这样做。SVG 在 Chrome、Firefox、Safari、Edge 和 Opera 中本机渲染,是大多数 Web 使用的正确格式。当目标不支持 SVG 时需要转换:Microsoft 在 2025 年 9-10 月退役了 Outlook web 和新的 Outlook for Windows 中的 inline SVG;iOS / Android 应用图标必须是 PNG;按需印刷服务需要 PNG;Discord 和 Slack 自定义表情上传 PNG;一些旧 CMS 仍拒绝 SVG 上传。对于这些场景,你栅格化一次并发布 PNG。

我应该以什么分辨率导出?

匹配目标。iOS 应用商店列表:1024x1024。Android Play Store:512x512(启动器内自适应图标:432x432)。PWA manifest:192 和 512。Open Graph 社交卡片:1200x630。Instagram 正方形:1080x1080。对于 Retina 显示,以显示 CSS 尺寸的 2 倍导出,100x100 图标应为 200x200 PNG 以保持清晰。对于打印,300 DPI 意味着每显示英寸 300 像素(4 英寸徽标打印 = 1200x1200 PNG)。此处最大值为 8192x8192,这是现代浏览器画布的限制。

为什么我的 SVG 在转换后缺少部分?

三个常见原因。CORS 阻止的外部资源:如果 SVG 引用另一个不返回适当 CORS 头的域上的图像或字体,画布变为「tainted」,导出会静默地丢弃它们。将图像嵌入为 data URI,字体嵌入为 @font-face 且 src 为 data URI。SVG 内的脚本不执行:<script> 标签被浏览器的图像解码器安全模型剥离,脚本生成的任何内容都不会出现。SMIL 动画在 time=0(起始帧)渲染;动画视觉状态不被捕获。对于依赖 JavaScript 或动画的 SVG,先在真实浏览器中渲染然后截图,或使用 Puppeteer 无头。

它保留透明度吗?

当选择「透明」作为背景时,是的,PNG 保留 SVG 的 alpha 通道,半透明像素完全保留。当目标不支持透明度或当你需要烘焙特定背景颜色时(某些旧打印环境),选择纯色(白色、黑色、自定义)。

我可以从一个 SVG 生成多个尺寸吗?

不能一键完成,此工具每次转换产生一个 PNG。对于应用商店图标集生成(iOS 和 Android 所需的十几个尺寸),使用 RealFaviconGenerator(web)、App Icon Generator(web)等专用工具,或 sharp-cli(Node.js)或 resvg-cli(Rust)等 CLI,它们执行的每尺寸转换与 Canvas 风格的栅格化相同,只是在许多尺寸上脚本化。

我的 SVG 文件会被上传吗?

不会。栅格化完全通过 Canvas API 在你的浏览器中运行。你的 SVG 和生成的 PNG 永远不会越过网络,在单击转换时在 DevTools 的 Network 标签中验证,或在页面加载后将其离线(飞行模式),转换器仍然工作。对于未发布的品牌作品、内部产品图标、受 NDA 约束的设计师源文件或你不希望被复制到陌生人硬盘上的任何 SVG 都很安全。

相关工具