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 本身检测出合理的默认值,同时也允许你自由调整。
使用方法
- 载入你的 SVG 选择文件(也支持拖放),或者直接粘贴 SVG 代码。
- 选择输出格式 选择 PNG(保留透明)或 JPG(透明区域会被填充为背景色)。
- 调整输出尺寸 直接输入宽度/高度,或使用缩放按钮(1x/2x/4x)一次性同时调整两者。
- 转换并下载 点击“开始转换”查看预览,然后立即下载。
用好本工具的小技巧
- 如果你的 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 的栅格化,无需额外的库。
常见问题
闲话 ― SVG 其实就是一个用 XML 写成的文本文件
PNG 或 JPG 是以像素网格的方式保存图像,而 SVG(可缩放矢量图形)则是用 XML 文本描述图形的坐标和路径。正因如此,无论放大还是缩小它都不会出现锯齿,也可以直接用普通文本编辑器打开查看其内容。这个结构也正是徽标和图标偏爱使用 SVG 格式的原因,因为它们需要在各种尺寸下都保持清晰锐利。
SVG 本身并没有“分辨率”这个概念,它只是纯粹的矢量描述。每当你把它转换成 PNG 或 JPG 这类传统的像素格式时,就必须有人来决定渲染时的像素尺寸。这也正是本工具需要你指定宽度和高度的根本原因——这是 SVG 本质决定的直接结果。
现实中不少 SVG 文件根本没有设置 width/height 属性,或者用百分比之类的相对单位来表示。遇到这种情况时,常见的做法是退而使用 viewBox 属性,它定义了 SVG 内容在内部所占据的坐标范围。本工具也遵循同样的惯例:当 width/height 缺失时,就用 viewBox 作为像素尺寸的替代参考。