SVG 转 PNG 转换器(同时支持转换为 JPG)

免费将 SVG 文件或粘贴的 SVG 代码转换为 PNG 或 JPG 图片。可自由设置所需的输出尺寸,全部处理都在浏览器本地完成。

PNG 还是 JPG?该如何选择

格式 特点 适用场景
PNG 无损压缩,画质不会下降,并且能完整保留透明背景。 徽标、图标、插画等需要透明背景或清晰边缘的场合
JPG 有损压缩,文件体积更小,但透明区域会被填充为你选择的背景色。 带有照片背景的图片,或者最看重文件体积的场合

SVG 转 PNG 转换器是什么?

这款 SVG 转 PNG 转换器可以把 SVG(矢量图)文件或粘贴的 SVG 代码,转换成你指定像素尺寸的 PNG 或 JPG 图片。SVG 广泛用于图标、徽标和插画,但在上传到网页表单,或者显示在不支持 SVG 的应用和旧环境中时,往往需要用到传统的图片格式。这款工具能在几秒钟内帮你完成这个转换。

整个转换过程完全在浏览器本地进行,使用的是浏览器自带的 Canvas API,因此你的 SVG 文件或代码不会被发送到服务器。由于 SVG 是矢量格式,导出时必须有人决定像素尺寸——本工具会从 SVG 本身检测出合理的默认值,同时也允许你自由调整。

使用方法

  1. 载入你的 SVG 选择文件(也支持拖放),或者直接粘贴 SVG 代码。
  2. 选择输出格式 选择 PNG(保留透明)或 JPG(透明区域会被填充为背景色)。
  3. 调整输出尺寸 直接输入宽度/高度,或使用缩放按钮(1x/2x/4x)一次性同时调整两者。
  4. 转换并下载 点击“开始转换”查看预览,然后立即下载。

用好本工具的小技巧

  • 如果你的 SVG 没有 width/height 属性或 viewBox,初始输出尺寸会默认为 512×512px,你可以随时改成需要的尺寸。
  • 缩放按钮(1x/2x/4x)会以 SVG 检测到的尺寸为基准整体放大,方便为 Retina(高 DPI)屏幕批量导出 2x/4x 的图标素材。
  • 如果需要保留透明背景,请选择 PNG。JPG 没有透明通道,透明区域会被填充为你选择的背景色(默认白色)。
  • SVG 中复杂的渐变和滤镜效果会按浏览器的渲染结果显示。如果 SVG 引用了外部字体或图片,只有浏览器能够成功加载它们时才能正确显示。
  • 勾选“锁定宽高比”后修改宽度或高度会保持原比例;取消勾选则可以分别设置宽度和高度。

应用场景

将图标和徽标栅格化

把设计工具导出的 SVG 图标转换为 PNG,再嵌入到不支持 SVG 的系统或应用中。

上传到网页表单

很多表单和服务不接受 SVG 上传,提前转换为 PNG/JPG 即可解决这个问题。

导出适配 Retina 屏幕的多种尺寸

使用缩放按钮,快速生成 1x/2x/4x 版本,用于制作高 DPI 图标集。

粘贴到社交媒体或幻灯片中

转换为传统图片格式,以便用在无法直接接受 SVG 的平台和幻灯片文件中。

术语解释

SVG(可缩放矢量图形)
一种用 XML 文本描述坐标和路径来表示图形的矢量图像格式,无论放大缩小都不会出现锯齿。
栅格化
将矢量图像按指定尺寸转换为像素网格(即栅格图像)的处理过程。
viewBox
SVG 中用于定义内容在内部所占坐标范围的属性,在缺少 width/height 时可作为尺寸的替代参考。
透明通道(Alpha 通道)
图像中按像素保存的透明度信息。PNG 会保留该信息,而 JPG 没有透明通道,转换时透明区域会被填充为背景色。
Canvas API
浏览器标准的 JavaScript 图像绘制与处理接口。本工具仅通过 Canvas API 完成 SVG 的栅格化,无需额外的库。

常见问题

如果需要保留透明背景或希望边缘清晰锐利(例如徽标、图标),请选择 PNG。如果图片本身带有照片背景,且更看重文件体积,则选择 JPG。

如果 SVG 文件定义了 width/height 属性或 viewBox,会以该数值作为初始尺寸;如果两者都没有,则默认为 512×512px。之后你可以自由修改尺寸。

不会。整个转换过程都在你的浏览器内通过 JavaScript 完成,任何内容都不会发送到外部服务器。

不会。由于 SVG 是矢量格式,无论导出多大的像素尺寸边缘都能保持平滑,这与放大已经栅格化的图片完全不同。

带动画的 SVG 会被导出为单张静止画面。引用了外部字体或图片的 SVG,只有当浏览器能够成功加载这些外部资源时才能正确显示。
工具君

闲话 ― SVG 其实就是一个用 XML 写成的文本文件

PNG 或 JPG 是以像素网格的方式保存图像,而 SVG(可缩放矢量图形)则是用 XML 文本描述图形的坐标和路径。正因如此,无论放大还是缩小它都不会出现锯齿,也可以直接用普通文本编辑器打开查看其内容。这个结构也正是徽标和图标偏爱使用 SVG 格式的原因,因为它们需要在各种尺寸下都保持清晰锐利。

SVG 本身并没有“分辨率”这个概念,它只是纯粹的矢量描述。每当你把它转换成 PNG 或 JPG 这类传统的像素格式时,就必须有人来决定渲染时的像素尺寸。这也正是本工具需要你指定宽度和高度的根本原因——这是 SVG 本质决定的直接结果。

现实中不少 SVG 文件根本没有设置 width/height 属性,或者用百分比之类的相对单位来表示。遇到这种情况时,常见的做法是退而使用 viewBox 属性,它定义了 SVG 内容在内部所占据的坐标范围。本工具也遵循同样的惯例:当 width/height 缺失时,就用 viewBox 作为像素尺寸的替代参考。