SVG 转 PNG。
把 SVG 文件或粘贴的 SVG 代码转成 PNG 图片,尺寸可选 1 倍、2 倍、4 倍或任意宽度,背景可以透明或纯色。每张图都按最终尺寸从矢量重新绘制,所以放大也不会糊。全部在浏览器里完成,文件不会上传。
怎么把 SVG 转成 PNG
- 选择 SVG 文件,或者拖到上面的框里。可以一次加多个,也可以直接粘贴 SVG 代码。
- 选尺寸:SVG 原尺寸的 1 倍、2 倍、4 倍,或者自定义宽度(像素)。默认 2 倍,在大多数屏幕上都很清晰。
- 选背景:透明,或者一种纯色。
- 转换,然后逐个下载 PNG,或者打包成一个 ZIP 一起下载。
需要注意:
- 任意尺寸都清晰。 工具按输出尺寸绘制矢量,而不是把小图放大,所以 4 倍的 PNG 和 1 倍的一样清楚。
- 尺寸和文件名。 尺寸取自 SVG 的 width 和 height,或者它的 viewBox。文件名保持不变,加上倍数:
logo.svg转成 2 倍后是logo@2x.png。 - 字体和外链图片。 浏览器把 SVG 当图片绘制时不会加载外部文件,所以用网络字体写的文字可能会换成别的字体,外链的图片也不会出现。如果字形必须一致,先在设计工具里把文字转成轮廓。
什么时候需要 PNG 而不是 SVG
在网站上,图标和 logo 最好用 SVG,但很多地方只收位图:App 图标、社交分享图、邮件、幻灯片、一些 CMS 字段,以及不少聊天和设计工具。把 SVG 当作源文件保留,需要时再按各处要求的尺寸导出 PNG。
如果 SVG 是 Codex 帮你做的,把 PNG 放进项目,再告诉它用在哪里:
改用 PNG 版本
在不支持 SVG 的地方使用 [public/brand] 里的 PNG 文件:[社交分享图、邮件页头和 README]。网站其他地方继续用 SVG,并给每个 <img> 设置 width 和 height,避免布局跳动。
常见问题
这个 SVG 转 PNG 工具免费吗?
免费。不用注册,没有水印,也没有每日次数限制。
文件会上传吗?
不会。浏览器在你的设备上读取每个 SVG、绘制并保存 PNG。网站只统计工具被用过,从不记录你放进去的内容。
为什么 PNG 里的文字和原来不一样?
SVG 很可能用了网络字体。浏览器把 SVG 当图片绘制时不加载外部文件,于是用了备用字体。在设计工具里把文字转成轮廓,或者把字体嵌进 SVG,再转一次就好。
怎么得到透明背景的 PNG?
背景保持「透明」即可,这是默认选项。SVG 没有画到的地方,在 PNG 里都是透明的。