SVG 转 PNG

SVG 是什么？

SVG（Scalable Vector Graphics，可缩放矢量图形）是 W3C 于 2001 年标准化的矢量图像格式。与 JPG、PNG 等存储像素网格的光栅格式不同，SVG 以 XML 文本形式存储形状、路径、文本和渐变等数学描述。这意味着 SVG 图像可以缩放至任意尺寸——从小图标到广告牌——而不会损失画质或增加文件体积。SVG 是 Logo、图标、插画、图表以及任何需要在所有分辨率下保持清晰的图形的标准格式。SVG 文件通常也非常小，可在任何文本编辑器或设计工具中直接编辑。

SVG 支持 CSS 样式、JavaScript 交互和动画，是 Web 图形的强大格式。但 SVG 也有局限：它不适合照片或复杂的连续色调图像，一些旧版应用、内容管理系统、图像编辑器和邮件客户端无法渲染 SVG 文件。将 SVG 转换为 PNG 可生成一张光栅图像，在固定分辨率下保留 SVG 矢量的清晰画质，同时获得 PNG 格式的通用兼容性。

PNG 是什么？

PNG（Portable Network Graphics，便携式网络图形）是 1996 年推出的无损光栅图像格式，旨在作为 GIF 的现代、免专利替代方案。PNG 采用 DEFLATE 无损压缩，意味着不会丢弃任何图像数据——解码后的图像与原始图像像素级一致。PNG 支持完整的 24 位色（超过 1600 万色）和完整的 8 位 Alpha 透明通道，是图标、Logo、UI 元素、截图以及任何需要清晰边缘或透明背景的图形的首选格式。

所有现代浏览器和几乎所有图像软件都支持 PNG。与 SVG 不同，PNG 是光栅格式：它以特定分辨率存储固定的像素网格，因此无法无损放大。然而，当需要一张带透明、随处可开的高质量静态图像时，PNG 是理想之选。将 SVG 转换为 PNG 可兼得两者之长——固定分辨率下 SVG 的清晰渲染，以及 PNG 的通用兼容性和透明支持。

SVG 与 PNG 对比

SVG 和 PNG 都是图形、图标和 Logo 的优秀格式，但属于不同类别。SVG 是可无限缩放且不损失画质的矢量格式，PNG 是存储固定分辨率像素网格并采用无损压缩的光栅格式。下表并排比较了两种图片格式的关键特性。

特性	SVG	PNG
图像类型	矢量（基于 XML）	光栅（像素网格）
发布年份	2001 年	1996 年
缩放	任意尺寸无损	放大会像素化
压缩	无（基于文本）	无损（DEFLATE）
透明通道	支持（完整 Alpha）	支持（完整 Alpha 通道）
动画	支持（SMIL、CSS、JS）	不支持（APNG 是独立格式）
适用场景	可缩放 Logo、图标、插画	带透明的固定分辨率图形
软件兼容性	有限（部分应用无法渲染 SVG）	通用

何时需要 SVG 转 PNG

在很多场景中，将 SVG 转换为 PNG 是合理的选择——尤其是需要通用兼容、带透明的固定分辨率光栅图像时。以下是将 SVG 图片转换为 PNG 的常见原因：

• 通用兼容性。每个浏览器、应用和设备都支持 PNG。一些无法渲染 SVG 的平台能正常显示 PNG。
• 需要固定分辨率光栅图。当应用或流程需要特定尺寸的基于像素的图像时，PNG 可提供可预测、可移植的结果。
• 需要保留透明。PNG 的完整 Alpha 通道可保留 SVG 的透明区域，非常适合放置在任意背景上的 Logo 和图标。
• 邮件附件。大多数邮件客户端无法在正文中渲染 SVG。改用 PNG 作为附件，收件人即可直接查看。
• 文档与办公流程。Word、PowerPoint、Excel、Google Docs、PDF 工具能稳定嵌入 PNG，对 SVG 的支持则参差不齐甚至缺失。
• 与客户和合作方分享。不确定对方使用的软件时，发送 PNG 既可避免兼容性问题，又能保留透明。

建议尽量保留原始 SVG 文件作为母版——它可缩放、可编辑。PNG 仅用于 SVG 尚未支持的固定分辨率兼容与分享场景。

如何将 SVG 转换为 PNG

使用本工具将 SVG 图片转换为 PNG 只需几秒，且全部在浏览器内完成——无需上传、无需注册、无水印。工具会在本地读取 SVG，将其光栅化到画布上，并编码为无损 PNG，转换既快速又私密。请按以下三步将 SVG 转换为 PNG：

1. 上传 SVG。点击上方上传区域或拖拽一个 .svg 文件。SVG 会即时在本地读取并显示预览。
2. 转换。点击"转换为 PNG"按钮。SVG 会被光栅化到画布上并编码为无损 PNG 图像。
3. 下载 PNG。点击"下载 PNG"将转换后的文件保存到设备。原始 SVG 文件不会被修改。

由于所有步骤都通过 JavaScript 在浏览器本地运行，SVG 图片绝不会被上传到服务器。这让转换过程完全私密、快速，也适合处理敏感图片。为获得最佳画质，请确保 SVG 具有明确的 width 和 height 属性，以便按预期分辨率光栅化。