SVG转PNG

SVG 转 PNG 工具使用指南

📌 简介

SVG 转 PNG 工具是一款专为前端开发者、UI 设计师和自媒体人打造的在线格式转换神器。SVG 是一种矢量图形格式，无论放大多少倍都不会模糊，非常适合网页图标和 Logo。但是，在某些聊天软件、旧版系统或特定的排版软件中，SVG 可能无法直接显示。使用本工具，您可以将任意 SVG 代码一键渲染为指定尺寸的高清 PNG 位图，同时支持添加透明、白色或黑色背景。

📖 矢量图与位图的区别

矢量图（如 SVG）通过数学公式记录图形的点、线、面，因此可以无限放大而不失真，且文件体积通常极小。**位图（如 PNG、JPG）**由像素网格组成，放大后会呈现马赛克。然而，位图格式（尤其是 PNG）拥有更广泛的兼容性。将 SVG 转换为 PNG 的核心原理是利用浏览器的 Canvas API：先将 SVG 转换为 Blob URL，加载到 Image 对象中，然后使用 drawImage() 按目标分辨率绘制到 Canvas 上，最后导出为 PNG 编码。这是一个纯前端的高效转换过程。

💼 常见应用场景

• 微信推文： 公众号编辑器通常不支持直接粘贴 SVG，转成 PNG 可保留高清质量。
• PPT 制作： 将矢量图标转为 PNG 插入 PPT，避免复制到其他电脑时丢失字体或样式。
• APP 开发： 将 UI 设计师提供的 SVG 图标转成不同分辨率（如 @2x, @3x）的 PNG 资源。
• 图标导出： 从 Iconfont 下载了 SVG，需要转成 PNG 提供给运营人员使用。

⚙️ 使用步骤

1. 直接上传本地的 .svg 文件，或者将 SVG 代码粘贴到左侧文本框。
2. 输入您期望的输出宽度（高度会自动按比例缩放）。
3. 选择背景色。如果是不规则图形，建议选择“透明”。
4. 点击“下载 PNG 图片”即可保存到本地。

⚠️ 注意事项

• 如果 SVG 中包含了外部链接的图片或特殊的 Web 字体，由于浏览器的跨域（CORS）限制，转换为图片时可能会丢失这些元素。建议将 SVG 中的资源内联化。
• 某些带有复杂滤镜的 SVG 在导出时可能渲染速度较慢。

❓ 常见问题 (FAQ)