SVG 转 PNG 转换器

在浏览器中把 SVG 转为 PNG,可按任意缩放倍数或精确宽度、高度输出,背景可透明或带颜色。支持只有 viewBox 的 SVG。

将 SVG 文件拖放到此处,或点击选择
也可以直接从剪贴板粘贴图片(Ctrl+V / ⌘V)

以图片方式渲染时,SVG 引用的外部图片、字体和样式表不会被加载;请先将其内嵌,或把文字转为路径。

完全在浏览器中运行,您的数据不会被上传。

什么是 SVG 转 PNG?

这个工具把 SVG 矢量图渲染为 PNG 图片。上传 .svg 文件或粘贴 SVG 代码,选择缩放倍数(1×–4× 或任意值)或固定的宽度、高度,并保持背景透明或填充颜色。矢量图会按目标尺寸重新渲染,因此 PNG 在任何分辨率下都保持清晰。

如何使用 SVG 转 PNG

  1. 拖放或选择 SVG 文件,或把 SVG 标记粘贴到 SVG 代码 中。
  2. 查看检测到的固有尺寸(来自 width/height、来自 viewBox,或默认的 300×150)。
  3. 在输出尺寸下选择缩放倍数或固定的宽度/高度,并输入数值。
  4. 保持透明背景开启,或取消勾选并选择背景色。
  5. 下载 PNG(文件名形如 logo@2x.png)。

示例

输入
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12"><rect width="24" height="12" fill="#ff0000"/></svg> at scale 2
输出
48×24 PNG, solid red (intrinsic size 24×12 taken from the viewBox)

何时使用 SVG 转 PNG

用于为应用、社交媒体、文档或不接受 SVG 的平台生成 PNG 图标、Logo 或插图。在网页上能用 SVG 时尽量继续用 SVG:它更小且与分辨率无关。依赖外部字体或图片的 SVG 渲染时会缺少这些资源。

SVG 转 PNG 的工作原理

工具读取根元素 <svg> 的 width、height 和 viewBox 来计算固有尺寸(pt、mm、in 等绝对单位会换算为 px;百分比则回退到 viewBox)。然后用精确的目标宽度和高度重写根元素(如果缺少 viewBox 就补上,使图形能够缩放),把它作为图片加载,并绘制到相应大小的 canvas 上,因此矢量图是以完整分辨率栅格化的,而不是从小位图放大而来。

常见用例

  • 以 2× 和 3× 导出 SVG Logo,用作移动应用资源。
  • 用 SVG 制作 512×512 的 PNG 图标,用于应用商店页面。
  • 把 SVG 图表转成 PNG,放进幻灯片或 Word 文档。
  • 为把透明显示成黑色的平台制作白色背景的 PNG。

安全提示

图片使用 Canvas API 在你的浏览器本地解码、处理和编码,不会上传到任何服务器。SVG 以图片方式渲染,因此其中嵌入的脚本不会运行。

常见问题

我的 SVG 没有 width 或 height,PNG 会是多大?

会使用 viewBox 的宽度和高度作为固有尺寸。如果也没有 viewBox,浏览器会使用 300×150,工具会提示你。

为什么我的文字字体不一样?

作为图片渲染的 SVG 无法加载外部字体。请在编辑器中把文字转为路径,或把字体以 data URI 的形式内嵌。

PNG 最大能有多大?

取决于浏览器 canvas 的上限。如果请求的尺寸更大,工具会缩小输出并给出提示。

探索更多分类