SVG to PNG Converter

SVG 转 PNG 转换器将矢量 SVG 图形转换为位图 PNG 格式。工具在浏览器中将 SVG 代码渲染到 Canvas 画布上，然后通过 Canvas API 将渲染结果导出为 PNG 数据。支持自定义输出尺寸（宽度和高度）、背景色设置（支持透明背景）、以及缩放比例控制，确保转换后的 PNG 图片保持清晰。

SVG 转 PNG 是 Web 设计和开发中的常见需求。将 SVG 图标导出为 PNG 格式以兼容不支持 SVG 的旧浏览器或邮件客户端；将 SVG Logo 转换为不同尺寸的 PNG 版本用于 Favicon 和应用图标；在需要固定尺寸的场景中将矢量图转为位图避免缩放问题；在社交媒体分享预览中需要 PNG 格式的图片。

转换后的 PNG 图片可以使用 图片尺寸调整工具 进一步调整大小，或使用 SVG 优化器 先在矢量层面优化再转换。

SVG 转 PNG 的核心是浏览器的 Canvas 渲染管线。工具将 SVG 代码构建为 Blob URL 或 Data URI，创建 Image 对象加载 SVG，然后将图像绘制到 Canvas 上，最后使用 canvas.toBlob() 或 canvas.toDataURL() 导出 PNG。由于 SVG 是矢量图形，可以在任何分辨率下渲染而不失真，这使得生成高分辨率 PNG 成为可能。

渲染时需要设置正确的 Canvas 尺寸（考虑设备像素比以避免模糊），以及处理 SVG 中的外部资源引用（如外部图片、字体），这些外部资源可能导致渲染失败或不完整。

• 外部资源丢失：SVG 中引用的外部图片（href）、外部字体和 CSS 样式表在转换为 PNG 时可能丢失，因为浏览器安全策略限制跨域资源访问。
• 文字渲染差异：不同操作系统和浏览器的字体渲染引擎不同，同一 SVG 在不同环境下的 PNG 输出可能存在微小差异。
• SVG 滤镜和动画：复杂的 SVG 滤镜效果和 SMIL 动画无法在静态 PNG 中保留，转换结果会丢失这些动态或高级视觉效果。
• 高 DPI 输出：为 Retina 屏幕生成 PNG 时需要设置 2x 或 3x 的缩放比例，否则在高分辨率屏幕上显示模糊。
• 大文件处理：复杂的 SVG（如包含数千个路径的地图）在 Canvas 渲染时消耗大量内存，可能导致浏览器崩溃或转换超时。

在需要快速将 SVG 图标或图形转换为 PNG 格式用于开发、演示或导出时使用此工具。对于需要批量转换或自动化的场景，推荐使用 Node.js 库（如 sharp、svg2png）或构建工具插件，它们可以集成到构建流程中，并避免浏览器的渲染限制。