SVG 转 PNG — 将 SVG 矢量图形转为 PNG 位图
将 SVG 矢量图形转换为 PNG 位图。可自定义宽度、高度和 DPI —— 完全在浏览器中运行,无需上传。
将您的 SVG 图片拖到此处
或点击浏览(最大 50MB)
SVG 是创作和编辑的理想格式 —— 与分辨率无关、文本可编辑、每个设计工具原生支持。PNG 是分发的理想格式 —— 普遍支持、像素完美、被所有展示图片的平台接受。从 SVG 转为 PNG 是连接「仍在迭代的设计」和「可发布资产」的标准工作流步骤。这种转换在某种意义上是单向的:矢量源是权威版本,PNG 只是渲染快照,源 SVG 应该和它一起保留以便未来编辑。
转换质量取决于两个渲染决策:分辨率(像素输出尺寸)和抗锯齿(边缘平滑方式)。转换器使用浏览器的 SVG 引擎按指定像素尺寸渲染 SVG,输出与直接打开 SVG 时看到的一致。DPI 设置把逻辑英寸映射到像素,所以 2 英寸宽的 SVG 以 300 DPI 导出得到 600 像素宽的 PNG,适合打印。背景默认透明 —— 如果 SVG 没有背景矩形,PNG 的 alpha 通道就是透明的,这正是 logo、图标和需要放在不同背景上的图形所需的。工具完全在你的浏览器中运行;SVG 在本地渲染,从不传输。
使用方法
拖入 SVG 文件
拖入 .svg 文件或粘贴 SVG 代码。渲染器会按当前输出尺寸实时预览 SVG,方便在栅格化前确认图形显示正确。
设置输出尺寸
选择输出的宽度和高度(像素)。默认使用 SVG 自身的 viewBox 尺寸;切换「锁定宽高比」可按比例缩放。DPI 控制像素密度 —— 屏幕用 72,打印用 300。
下载 PNG
点击下载即可保存 PNG。如果 SVG 没有背景矩形,输出会包含透明背景,PNG 中的 alpha 通道会被保留。
常见问题
为什么要把 SVG 栅格化成 PNG?
PNG 被普遍支持 —— 每个操作系统、每个聊天应用、每个社交媒体平台都原生渲染 PNG。SVG 的支持程度参差不齐,尤其是在邮件客户端、CMS 上传和第三方嵌入场景中,SVG 可能因安全原因被屏蔽。
PNG 会保留透明度吗?
会的。如果 SVG 没有背景填充,输出的 PNG 就有透明的 alpha 通道。这个透明度是完整的 8 位 alpha —— 不是二值(开/关)—— 因此抗锯齿边缘和半透明元素在任何背景下都能正确渲染。
打印应该选什么分辨率?
以 300 DPI 打印时,用所需打印尺寸(英寸)乘以 300。4×3 英寸的图形在 300 DPI 下需要 1200×900 像素。输出选项中的 DPI 设置会根据物理尺寸自动计算像素尺寸。
会渲染外部样式表里的 CSS 吗?
SVG 内的内联样式和 `<style>` 块会被渲染。通过 URL 引用的外部样式表不会被获取。依赖外部托管 CSS 的 SVG,请先把这些样式内联进去再转换。
限制说明
- 不支持多分辨率导出工具按指定尺寸导出单张 PNG。如需 srcset 响应式图片(1x、2x、3x),请按每个分辨率各运行一次转换 —— 输出尺寸每次都可配置。
- 动画会丢失SVG 动画元素只会被渲染到其初始状态。如需导出动画 SVG,请把浏览器的渲染录制成视频,或在另一个工具里逐帧导出为 PNG。
- 字体渲染依赖系统字体SVG 中的文字使用浏览器可用的字体渲染。如果 SVG 引用了未安装的字体,浏览器会回退到默认字体,渲染出的文字可能与设计意图不同。
平台说明
- macOS
- macOS 等价命令是 `qlmanage -t -s 1200 -o . file.svg`(生成 PNG 缩略图),或用 `sips` 做图像转换。浏览器工具的优势是像素级的尺寸精确控制。
- Linux
- Inkscape 和 rsvg-convert 是常用的 CLI 工具。浏览器工具无需安装包,并能先看到输出尺寸的实时预览再保存。
- Web
- 完全使用 Canvas API 在浏览器中运行。SVG 在本地渲染,从不传输 —— 适合专有 logo、内部图表和未发布的设计稿。