跳到正文
Codex DesignBETA

SVG 转 PNG。

把 SVG 文件或粘贴的 SVG 代码转成 PNG 图片,尺寸可选 1 倍、2 倍、4 倍或任意宽度,背景可以透明或纯色。每张图都按最终尺寸从矢量重新绘制,所以放大也不会糊。全部在浏览器里完成,文件不会上传。

尺寸
背景

在你的浏览器里运行,放进来的内容不会上传,也不会保存。

改为把 PNG 转成 SVG

怎么把 SVG 转成 PNG

  1. 选择 SVG 文件,或者拖到上面的框里。可以一次加多个,也可以直接粘贴 SVG 代码。
  2. 选尺寸:SVG 原尺寸的 1 倍、2 倍、4 倍,或者自定义宽度(像素)。默认 2 倍,在大多数屏幕上都很清晰。
  3. 选背景:透明,或者一种纯色。
  4. 转换,然后逐个下载 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 里都是透明的。

继续阅读

Codex Design 是独立开发的 Codex 插件,与 OpenAI 无关联,也未获 OpenAI 认可。