任务路径 / 从输入到结果
如何把 SVG 栅格化为 PNG
- 01
添加 SVG
“选择文件”一次接受一个 .svg。原始标记代码绝不会放进页面；预览只在净化后的渲染完成后出现。
- 02
选择尺寸
在“导出比例”下点击 1x、2x、3x 或 4x，或在“输出宽度”和“输出高度”中输入精确的像素值。
- 03
净化并转换
点击“净化并转换”。摘要会列出最终像素尺寸，以及因不安全或不受支持而移除的项目数。
- 04
检查并下载
如果移除数量大于零，请先把预览与原始图稿对比，再下载 PNG。
SVG 转 PNG
打开一个 SVG，本页会先用严格的白名单清理它，再把安全的版本按你选择的倍数渲染到透明 PNG 上，全部在浏览器内完成。脚本永远不会运行，文件也不会上传。需要知道的是：白名单之外的内容，例如 CSS 样式、滤镜、标记和嵌入图像，会在渲染前被移除。
工具速览
- SVG 大小上限
- 标记代码 2 MiB，且须识别为 image/svg+xml
- 缩放
- 1x、2x、3x、4x 按钮，本页预设 2x；“导出比例”也接受 0.01 到 32
- 输出上限
- 缩放后单边 8,192 px、总计 24 MP
- 渲染前移除
- 脚本、事件处理器、style 属性和 <style>、滤镜、标记、<image>、foreignObject、外部 URL 及 data: URL
- 直接拒绝
- 含 DOCTYPE 或 ENTITY 声明的文件，以及既无 width/height 也无 viewBox 的文件
- 背景
- PNG 中保持透明；只有切换到 JPEG 时才会填充底色
把矢量图稿变成像素
SVG 描述的是形状，所以在任何尺寸下都清晰锐利，但幻灯片工具、文档编辑器、应用商店页面等许多地方需要固定的位图。栅格化为 PNG 可以保留透明度，除了你选定的像素网格之外不损失任何东西。
真正需要决定的就是这个网格。缩放倍数乘以 SVG 自身的 width 和 height（缺少这两个属性时则用 viewBox），所以 64×64 的图标在 2x 下变成 128×128。之后再放大 PNG 会变模糊，因此请按需要的最大尺寸渲染。
大多数意外都能用净化来解释。路径、基本形状、文字、渐变、剪切路径、蒙版、图案和本地 <use> 引用都会保留，fill、stroke 等表现属性也一样。写在 CSS 类、style 属性或 <style> 块里的样式会被丢弃，因此以这种方式导出的图稿可能渲染成黑色或没有填充。
常见问题
为什么 PNG 变黑或颜色丢失？
颜色很可能是用 CSS 设置的：<style> 块、类规则或 style 属性。这些都会被去掉，而 SVG 形状默认以黑色填充。请改用表现属性（fill、stroke）而非 CSS 重新导出 SVG，或在设计工具中选择内联属性导出。
高分辨率屏幕应该选哪个倍数？
本页默认 2x，会把 SVG 声明的尺寸翻倍，适合大多数高像素密度屏幕。较大的展示位置可用 3x 或 4x，但结果仍须在单边 8,192 px 和 24 MP 以内。
为什么箭头或投影不见了？
在 SVG 中，箭头用 marker 元素绘制，投影用 filter 元素绘制，两者都不在净化器的白名单中。导出 SVG 前，请先在编辑器里把这些效果转换为普通路径。
为什么我的 SVG 被拒绝？
常见原因有：含 DOCTYPE 或 ENTITY 声明、文件超过 2 MiB、文件未被识别为 image/svg+xml，或根元素没有 width、height 和 viewBox。会让渲染超出像素上限的缩放倍数也会被拒绝，并注明对应的限制。
链接的字体和图片会出现在 PNG 中吗？
不会。外部 URL、data: URL 和 <image> 元素都会被移除，所以链接的图片和网络字体永远不会加载。文字会用浏览器中已有的、对应所指定 font-family 的字体绘制；如果对字形要求精确，请在编辑器中把文字转为轮廓。