SVG 转 PNG 与 Base64

粘贴 SVG 代码或上传 .svg 文件,导出 PNG,或直接拿走 Data URL、CSS 背景和 img 标签代码。

文件不上传

把 SVG 放进来

直接粘贴 <svg>…</svg> 代码,或选择本地 .svg 文件。没有 width/height 的图标会用 viewBox 推断尺寸。

转换预览 棋盘格表示透明区域
—
SVG 尺寸—
输出尺寸—
PNG 体积—

常见问题

转换会执行 SVG 里的脚本吗?

不会。栅格化通过 img 解码完成,浏览器在这一步不执行 SVG 内的 script,也不会加载其中引用的外部资源。

三种嵌入代码怎么选?

SVG Data URL 体积最小、放大不失真,适合图标;PNG Data URL 兼容性最好;独立文件加 CSS 背景适合中大型图,能被浏览器缓存。

图标没有 width 和 height 怎么办?

工具会用 viewBox 推断尺寸,mm、cm、in、pt 单位会自动换算成像素。

为什么导出后少了一些内容?

原 SVG 可能引用了外部图片或字体。建议先把这些资源内联成 Data URL,再放进本工具转换。

SVG 转 PNG,以及该用哪种嵌入方式

SVG 是矢量格式,放大不失真,适合图标与线条插画;但某些场景(邮件模板、部分社交平台、老旧系统)只接受位图,这时就需要转成 PNG。这个工具在浏览器里把 SVG 栅格化,顺便把常用的三种嵌入代码一起生成:SVG 的 Data URL、PNG 的 Data URL、以及 CSS background 写法。

多倍率导出

1× 到 4× 可选,也能直接指定宽度;2× 图用于高清屏最稳妥。

透明或白底

保留透明通道可以叠在任意背景上;转白底可以避免在深色界面上发灰。

三种代码一键拿

Data URL、CSS 背景、img 标签,复制即可粘进项目。

脚本不会执行

栅格化通过 img 解码完成,SVG 内嵌的 script 在解码阶段被浏览器直接忽略。

尺寸推断

没有 width/height 的图标用 viewBox 推断,mm、cm、pt 单位会换算成像素。

本地完成

不上传文件、不请求接口,断网也能转换。

三种嵌入方式怎么选

  1. 矢量 Data URL(data:image/svg+xml;base64,…):体积最小、放大不失真,适合图标。缺点是不能再被 CSS 单独改色。
  2. PNG Data URL:兼容性最好,任何支持位图的地方都能用;代价是体积大且不随缩放变清晰。
  3. 独立文件 + CSS 背景:适合中大型图,可以被浏览器缓存与并行加载,是首页首屏图的推荐做法。