SVG转PNG转换器 - 在线免费按任意尺寸栅格化SVG

把SVG矢量文件按您指定的精确像素尺寸转成PNG图片。全程在浏览器中运行,无需上传,也不会被固定成150像素的输出。

SVG转PNG到底做了什么

SVG并不是PNG那种意义上的图片。它是一份用数学方式描述形状、路径和文字的文本文档——一个圆是一个圆心加一个半径,而不是一格格带颜色的点。PNG恰恰相反:一张固定的像素网格,一旦确定就无法更改。因此两者之间的转换不是重新打包,而是一次渲染。浏览器自带的SVG引擎会按您选的尺寸重新绘制这幅图,渲染出的像素就成了PNG。这也是为什么本站其他工具都不问,唯独这个工具要问您宽度和高度。这里没有“原始分辨率”可供保留,因为矢量图根本就没有分辨率。您要512像素,每一条曲线就按512像素计算;您要4096,同一个文件就产出一张锐利的4096像素图片,既不涉及放大,也不会发虚。您选的尺寸是决定画质的唯一因素。这个尺寸控件的存在还为了避开一个具体的坑。如果一个SVG的根元素上省略了width和height,它就完全没有固有尺寸,而浏览器被要求把它当作普通图片绘制时,会退回到约150像素的CSS默认值。大量图标集、Figma导出文件和手写的SVG恰好就是这个样子——它们只带一个viewBox,只固定了比例而没有固定尺度。天真地转换一下,一个本该上广告牌的logo回来时成了缩略图。本工具会先读文件,在尺寸是它替您选的而不是文件自带的时候明确告诉您,并且拒绝悄无声息地按150像素栅格化。

为什么要把SVG转成PNG

几乎总是因为下游的某个环节读不了矢量图,或者您需要一个固定的渲染结果,而不是一个随渲染器而变的结果。

满足那些干脆拒收SVG的平台——应用商店素材、大多数社交网络、电商平台和邮件客户端
得到可预期的结果,因为PNG在任何地方渲染都一样,而SVG取决于查看端对字体和滤镜的支持程度
用一个源文件按1x、2x或4x产出图标或logo的多个尺寸——favicon、应用图标、缩略图
把图形放进完全不支持矢量的软件,从旧版办公套件到游戏引擎和照片编辑器

如何把SVG转换为PNG

真正需要决定的只有输出分辨率,所以转换之前值得花一点时间想清楚。

1

添加一个SVG或一整批——您设定的尺寸会应用到这一批的每个文件

2

检查宽度和高度。当SVG自带声明尺寸时,它们以此为起点;没有的时候工具会明确告诉您

3

设置您需要的分辨率,或者点1x、2x、4x。除非您有意要把图形拉伸,否则请保持比例锁定

4

执行转换,查看预览,然后下载PNG,或把整批打包成一个ZIP取走

常见问题

因为SVG没有像素可保留。本站其他所有转换都是从一张有固定网格的图片开始——1920x1080的JPG变成1920x1080的PNG,没什么可问的。矢量图用方程描述形状,在被渲染之前它没有分辨率。那些不问您的转换器,其实只是自己挑了一个数字而没告诉您;而当文件本身没有声明尺寸时,它们落到的那个数字通常就是浏览器的150像素兜底值。
您设多大就是多大。本工具会读文件的viewBox来推算比例,然后建议长边1024像素,并明白地告诉您这个数字来自我们而不是来自文件。这个默认值是一个稳妥的起点,而不是推荐值——如果这幅图是要做应用图标或印刷素材,请直接填写您真正需要的尺寸。它绝不会做的一件事,是退回到150x150,而天真的画布转换对这类文件产出的恰恰就是这个结果。
不会,而这一点会让习惯了缩放照片的人感到意外。放大JPG是在拉伸已有的像素,细节自然被抹开。而以更大尺寸渲染SVG,是从头重新计算每一条路径,所以4096像素的导出和256像素的导出一样锐利——中间根本不存在放大这回事。唯一的真实代价是文件体积和渲染时间。例外是SVG内部嵌入的位图:那些是普通的点阵图,渲染尺寸一旦超过它们的原生分辨率就会变软。
只要目的地接受,就保留SVG。在网页上它通常更小,在任何显示器、任何缩放级别下都保持锐利,还能用CSS重新设置样式。什么时候该转换:目的地拒收矢量图时,您需要在各种查看端得到完全一致的渲染时,或者SVG依赖了目标渲染器可能不支持的字体和滤镜时。常见做法是把SVG留作母版,按需导出PNG——矢量图始终是唯一可信的源头。
会。PNG有alpha通道,SVG从未绘制过的区域会保持完全透明,所以一个没有背景矩形的logo导出来也不会带背景。如果您在结果里发现了意料之外的白色或彩色底,那几乎可以肯定是SVG自己画了一个填充矩形,而不是转换过程加上去的。用编辑器打开文件,把那个形状删掉即可。
因为另一种做法更糟。当SVG被当作图片绘制时,浏览器会阻止它通过网络获取任何东西,于是被链接的logo或网络字体根本就到不了——导出结果会在那块内容的位置留下一片空白,而且没有任何提示。与其递给您一个悄悄残缺的PNG,本工具选择停下来并说明原因。把图片以data URI形式嵌入、把文字转成轮廓,或者在编辑器里把文件拍平,之后就能正常转换了。
不会。SVG的读取、渲染和编码全部在您的浏览器内完成,文件不会离开您的设备。这一点在这里比平时更重要,因为SVG是纯文本,通常还带着生成它的设计工具留下的图层名称、注释和内部标识符。这些都不会流到别处。真正的限制是您设备的内存而不是上传上限,这也是为什么超大的输出尺寸会在尝试之前就被拦下。
浏览器对用于渲染的画布有上限——每边约16384像素,总面积上限在手机上还要更低。超过这个限制,画布并不会报错;它会返回一张空白位图,下载下来就是一张空图。本工具会预先用您请求的尺寸对照这些限制,并直接给出提示而不是硬试。如果确实需要超大输出,请用Inkscape这类桌面软件来渲染SVG,它不受浏览器画布的束缚。

更多图片工具

探索其他强大的图片编辑工具