浏览器内把 SVG 栅格化成 PNG:自定义尺寸、1×/2×/3× 高清倍数、真透明背景，全程不上传。
- 本地处理
- 分类 图片
- 适合 发布前把图片尺寸、格式或体积调到合适范围。
这个工具能做什么
在浏览器里把 SVG 转成 PNG，一字节都不上传。粘贴 SVG 源码、拖一个 .svg 文件，或点选一个都行。工具会从 width/height 属性读出原始尺寸 （没有就退回到 viewBox 推算），展示给你看，再通过离屏 Canvas 栅格 化，给你一张可直接下载的 PNG。输出宽高随你定，可锁定宽高比，倍数 可选 1×/2×/3× 或自定义，让 PNG 在 Retina 和 4K 屏上依然锐利。背景 默认透明（这正是 PNG 相对 JPG 的存在意义），也可以填任意纯色十六 进制做实底。SVG 是通过 blob URL 当作图片加载的，不会注入到页面里， 所以哪怕你粘进来的文件带 <script> 或 onload，也无法在你浏览器里 执行任何东西。
工具细节
- 输入
- 文件 + 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 下载 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 12 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 图片 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
SVG 转 PNG 转换器 适合怎么用
适合在网站、店铺、社媒、表单上传或素材交付前处理图片。
适合处理的图片任务
- 发布前把图片尺寸、格式或体积调到合适范围。
- 分享照片前检查 EXIF、GPS 和其他隐藏元数据。
- 不上传私有素材,也能生成可发布的图片变体。
图片检查项
- 先按真实展示尺寸改图,再压缩。
- 转格式后检查透明度、动画和色彩配置是否变化。
- 图片可能含隐私时,先检查或清理元数据。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把 Figma 图标按 3× 导成 PNG 喂给老 Android 工程
设计系统都在 SVG 里，但有个老 Android 模块还在用 PNG drawable， 要 xxhdpi（3×）资源。从 Figma 的 dev 模式把图标 SVG 复制出来， 粘到这里，确认原始尺寸读出来是 24×24，倍数设 3×，背景保持透明， 下载一张锐利的 72×72 PNG。再给 hdpi（1.5× → 宽度填 36）和 xhdpi（2×）各来一遍。不用再绕设计软件的"按倍数导出"弹窗，透明也 完整保留，图标叠在任何工具栏颜色上都干净。
给不收 SVG 的幻灯片做一张透明 PNG logo
Keynote 和老版 PowerPoint 要么直接拒收 SVG，要么把描边宽度渲染 错。把品牌 logo 的 SVG 粘进来，背景留透明，倍数提到 2× 让它在 4K 投影上也清楚，PNG 直接拖到幻灯片上。因为填充是透明的，logo 在深色标题页和白色内容页上都干净落位，周围不会有一圈可见的方框。
用矢量模板批量生成 Open Graph 分享图
你有一张 1200×630 的社交卡片，用 SVG 设计、标题可替换。把改好的 SVG 粘进来，尺寸框填 1200 × 630（模板本来就是这个比例就解锁宽高 比），背景选纯色（那些会把 alpha 拍平的链接预览爬虫不会渲染成 黑底），然后导出。把 PNG 填进 meta 标签当 og:image。整个流程本地 跑，连出十几个变体也不烧任何 API 额度。
把 SVG 图标集的一帧栅格化进邮件签名
邮件客户端对 SVG 极不友好，Gmail、Outlook、Apple Mail 要么剥 掉要么直接拒收。把你需要的那一帧图标拿出来，粘它的独立 SVG，设 一个固定宽度比如 120px（高度自动锁定），保持透明，导出。出来的 PNG 作为普通 <img> 放进签名 HTML，在每个邮件客户端里渲染都一致， 这是 SVG 永远做不到的。
把手工调过的图表 SVG 转成 PNG 放进 PDF 报告
你用 D3 或某个绘图库画了张输出 SVG 的图表，但报告流水线是用栅格 图拼 PDF 的。把图表 SVG 粘进来，输出宽度设成跟报告栏宽匹配（比如 满版图按印刷 DPI 给 1600px），用白底让图表在页面上读得清，然后 导出。坐标轴文字和细网格线依然锐利，因为它们是按最终尺寸从矢量 栅格化的，不是拿一张屏幕分辨率的截图放大上去的。
常见踩坑
粘了一段没有根 <svg> 的内部片段。工具需要完整的 <svg>…</svg>，带 viewBox 或 width/height 才知道按多大渲染。光一个 <path> 或 <g> 解析不出来，先用带正确 viewBox 的 <svg> 包起来。
以为内嵌文字会用系统字体或网络字体。SVG 当作图片栅格化时，按名字引用的网络字体不会加载，文字要么回退到默认字体要么直接消失。要精确字形就在编辑器里先把文字转成轮廓（路径）再导出。
按 SVG 那点原始尺寸（比如 16×16）导出，再用 CSS 把 PNG 放大。这把"从矢量出发"的全部意义都扔了。把输出宽度设成你实际要显示的尺寸，或者用 2×/3× 倍数，从矢量重新栅格化，而不是把一张小位图拉大。
隐私说明
转换全程在你的浏览器标签页里跑。DOMParser 以只读方式把 SVG 当 XML 解析读出尺寸（标记从不注入到活动页面里，所以粘进来的 <script> 或 onload 属性不会在这里执行），blob URL 把 SVG 喂进离屏 Image 元素， Canvas 栅格化，canvas.toBlob 生成 PNG。不上传、不对你转过什么打点、 不记日志。转换时打开 DevTools 的 Network 面板，请求数始终是 0。图片 模式渲染路径有一点要说明：外部引用（远程字体、外部 <image> 链接） 是被刻意拦截的，安全，但代价是一个不自包含的 SVG 可能渲染出缺件， 这属于正确性提醒而非隐私问题。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。