SVG 转 PNG
拖 .svg 文件进来，或者直接把 SVG 代码粘贴进去。想要几倍就选几倍——不是把小图放大，是按你要的分辨率重新渲染一遍矢量，所以 8 倍出来还是锐的。
点击选择 或拖拽 .svg 文件到这里
可多选批量转换 | 直接 Ctrl/⌘+V 粘贴代码也能识别
单边上限 8000px，超过会被截到 8000（再大很多浏览器的 Canvas 会直接返回空白图）。缩略图里的灰色棋盘格代表透明区域，不会出现在下载的文件里。
常见问题
转出来的 PNG 边缘发虚，是 SVG 有问题吗？
不是 SVG 的问题，是转换方式的问题。很多在线工具的流程是：按 SVG 的默认尺寸光栅化成一张位图，你要更大就把这张位图插值放大——放大位图当然会虚。矢量的正确用法是先定分辨率再渲染：本工具会把 <svg> 根节点的 width/height 改写成你要的目标像素，浏览器再按这个尺寸重新计算每条路径。所以选 8× 得到的边缘和选 1× 一样干净。
为什么我的图标转出来只有 300×150？
因为那个 SVG 只写了 viewBox，没写 width 和 height。SVG 规范规定这种情况下按 CSS 替换元素的默认尺寸处理，也就是 300×150，Figma 和 Iconfont 导出的图标大量属于这一类。本工具会优先读 viewBox 的第三、四个数字当作固有尺寸（比如 viewBox="0 0 24 24" 就按 24×24 算），所以你选 8× 会得到 192×192 而不是 2400×1200。真的既没尺寸也没 viewBox 时才会回落到 300×150，并在结果行里用黄字标出来。
SVG 里的文字变成方框或者干脆没了
浏览器把 SVG 当独立图片渲染时，出于安全策略不会发起任何外部请求——外部字体文件（@font-face 指向的 woff）、<image xlink:href="https://…"> 引用的外部位图，全都加载不到。解决办法在设计工具里：Figma 选中文字层用 Outline（轮廓化），Illustrator 用「创建轮廓」，把文字变成路径再导出。位图素材改成 base64 data: 内嵌。这不是本工具的限制，所有纯浏览器端方案都是这样。
透明背景保留吗？能换成白底吗？
默认导出透明背景 PNG。要贴进白底 Word / PPT，选「填充纯色」再挑颜色更省事，也能让文件小一些。选 JPG 时会自动强制纯色，因为 JPEG 格式本身没有 alpha 通道，存不了透明像素。
能批量转吗？会上传我的文件吗？
能批量，一次拖入多个 .svg 会排队串行转换（串行是为了避免十几个 SVG 同时解码把内存打满），转完点「下载全部」。文件不上传：解析用浏览器自带的 DOMParser，光栅化用 Canvas，整个过程在你设备上跑，断网也能用。
反过来，PNG 能转成 SVG 吗？
不能，至少不能真正做到。SVG 是数学描述的路径，PNG 是一格格的像素，从像素反推路径叫「矢量化」，需要边缘追踪算法，而且对照片几乎无效——出来的是一堆色块拼成的假矢量，文件比原图还大。真正需要矢量的图，要么找原始设计文件，要么重新画。位图之间的互转用 格式转换 就行。
SVG 转 PNG 这件事，值得多说几句
SVG 是矢量格式，理论上无限放大都清晰，那为什么还要转成 PNG？因为大量地方不认 SVG。微信公众号后台上传封面不收 SVG，小红书发图不收，Word 里插入 SVG 在旧版本会变成一个空框，PPT 里能插但换台电脑字体可能就跑了，很多电商平台后台、政务系统上传控件只接受 jpg/png，安卓早期版本的 ImageView 也不直接支持。设计上用矢量、交付时给位图，是绕不开的一步。
核心问题：先定分辨率，还是先渲染
这决定了转换质量，也是各家工具的真正差别。一种做法是把 SVG 按它自己的尺寸渲染成位图，你想要更大就把这张位图放大——这时候程序在做的是插值猜像素，原本只有 24×24 个真实像素点，放到 192×192 要凭空补出 36 倍的信息，边缘必然发虚发糊。另一种做法是先把目标分辨率写回 SVG，再让渲染引擎算一遍：路径的数学描述还在，圆弧在 192px 的画布上重新求交、重新抗锯齿，每个像素都是算出来的真值。
本工具走的是第二条路：读到你选的倍数或宽度后，把 <svg> 根节点的 width/height 属性改写成目标像素值，序列化成新的 SVG，再交给 Image 解码、drawImage 落到同尺寸的 Canvas 上。这里有个容易踩的坑：如果原 SVG 没有 viewBox，只改 width/height 等于把画布撑大而内容不动，结果是图形缩在左上角、右下一大片空白。所以在改写之前必须先补一个 viewBox="0 0 原宽 原高"，建立起用户坐标到画布的映射关系，缩放才会真正生效。
为什么图标转出来常常是 300×150
这是最高频的困惑，答案在 SVG 规范里。当 <svg> 根节点没有指定 width/height（或者写成了 100%），它作为图片被引用时使用 CSS 替换元素的默认固有尺寸，也就是 300×150。Figma 复制图层拿到的代码、Iconfont 下载的图标包，很多只带 viewBox="0 0 24 24" 这类信息，因为它们本来是给网页内联用的，尺寸由 CSS 控制。
处理办法是把 viewBox 的后两个数字当固有尺寸。viewBox="0 0 24 24" 就按 24×24 算，选 8× 得到 192×192；只写了 height 没写 width 的，用 viewBox 的宽高比反算另一边。真的既没尺寸也没 viewBox（少见，通常是手写的残缺代码），才回落 300×150，并且在结果行里标黄提示，让你知道这个数字是兜底来的、不是文件本身的意思。
单位那点事
SVG 的 width 允许带单位，width="10mm" 在打印场景很常见。换算按 CSS 绝对单位走，1in = 96px、1pt = 96/72 px、1mm = 96/25.4 px：
| 写法 | 换算成 px | 常见来源 |
|---|---|---|
| width="256" | 256 | 直接给像素，最常见 |
| width="192pt" | 256 | 从 PDF / 印刷软件导出 |
| width="2in" | 192 | CAD、图表工具 |
| width="50mm" | 189 | 贴纸、包装、标签设计 |
| width="100%" | 无效，回落 viewBox | 为内联网页而写的图标 |
百分比、em、auto 都依赖父容器，脱离上下文没有确定值，所以一律当作「没写」处理，去看 viewBox。
该选几倍，还是直接填宽度
两种思路对应两类需求。按倍数适合你信任源文件尺寸、只是要一份高清位图的场景：一个 viewBox="0 0 24 24" 的图标选 2× 得 48×48 给普通屏，选 3× 得 72×72 给 Retina 和高密度安卓屏用，比例关系一眼能算。指定宽度适合有硬性尺寸要求的交付：应用图标要 512×512 上架、favicon 要 64、社交封面要 1920 宽，直接填数字比反推倍数快。预设按钮里那几个值就是这些常用规格。
不要无脑拉 8×。SVG 转 PNG 后就是普通位图，2400×2400 的纯色图标 PNG 可能有几百 KB，而 256×256 的版本只有十几 KB，在网页里用大的那个纯属浪费带宽。够用就好，图标类的实际经验是最终显示尺寸的 2 到 3 倍封顶。
字体和外部引用一定要提前处理
浏览器把 SVG 当图片渲染时是隔离环境：不执行脚本、不发外部请求、不继承页面 CSS。这意味着三类东西会丢——@font-face 引用的网络字体、<image href="http…"> 引用的外部位图、依赖外部样式表的样式。表现是文字变成系统默认字体（或者干脆缺字），位图区域空白。
解决方式都在导出之前：文字在设计工具里轮廓化（Figma 的 Outline Stroke、Illustrator 的创建轮廓、Inkscape 的路径→对象转路径），转成路径后就不再依赖字体文件；位图素材转成 base64 内嵌进 xlink:href="data:image/png;base64,…"。轮廓化的副作用是文字不可再编辑，所以留一份未轮廓化的源文件。
转完之后通常还要做两件事
一是压体积。8× 导出的 PNG 动辄几 MB，上传前用 图片压缩 按目标 KB 压一遍最省事，政务表单 50KB、简历 200KB 这类硬门槛它会自动逼近。二是换格式或改尺寸：网页上用建议再转一次 PNG 转 WebP，同画质体积能少三成到一半；要出多个尺寸版本用 调整尺寸 批量缩。图标要做成圆角或圆形头像的，接 圆角图片。
整个链路都在浏览器里，SVG 解析靠 DOMParser，光栅化靠 Canvas，没有一个字节离开你的电脑。设计稿、未发布的品牌 logo、客户的 VI 文件——这些恰恰是最常需要转格式、也最不该随手上传到陌生服务器的东西。