跳到正文

SVG 转 PNG

SVG to PNG

按任意倍率把 SVG 渲染成 PNG、JPEG 或 WebP,背景可透明也可填色。

把 SVG 变成位图,是目的地接受不了矢量时做的事:社交卡片、邮件、应用图标。麻烦在于浏览器是孤立地渲染 SVG 的——没有链接的图片、没有外部样式表、没有网页字体——所以出来的不总是你页面上显示的样子。

🔒 完全在你的浏览器里运行svgrasterconvertvector

把 SVG 放到这里

也可以把标记粘到下面。

源文件

怎么用

  1. 拖入文件或粘贴标记

    固有尺寸从 width/height 或 viewBox 读取,不得不猜的时候页面会说。

  2. 设倍数

    它乘以固有尺寸,结果的像素尺寸显示在滑块旁边,所以 24px 图标的 3× 明明白白是 72px,而不是一个猜测。

  3. 选透明或背景

    JPEG 没有 alpha,所以选它会强制一个背景色,而不是悄悄合成到黑色上。

常见问题

文字出来是错的字体。

渲染器不能获取网页字体——这样栅格化的 SVG 不加载任何外部资源。导出之前在编辑器里把文字转成路径;这是对必须在任何地方栅格化一致的 SVG 的标准建议。

它说浏览器拒绝渲染。

通常是缺 xmlns 属性——没有它的 SVG 不是浏览器会绘制的 XML——或者标记格式错误,或者引用了它不被允许加载的资源。

我的网站该栅格化吗?

通常不该。SVG 在任何像素密度下都清晰,往往比 PNG 还小;给 CSS 用的话,data URI 编码工具能让它保持矢量。只在下游确实读不了 SVG 时栅格化。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。