SVG 转 PNG
PNG 是矢量图去往 SVG 到不了的地方的通行证——幻灯片、文档、应用商店、上传表单。下方的倍率选择器才是重点:按 2× 或 4× 渲染,PNG 在大尺寸下依然像素级锐利,SVG 的透明也完整保留。
相关推荐: SVG 转 JPG
使用方法
把 SVG 文件拖到工具上——从剪贴板直接粘贴代码密集的图标也可以。
选择 1× 到 4× 的导出倍率(默认 2×):它与 SVG 声明的尺寸相乘,每一档都锐利如初,因为像素直接来自矢量。
清晰的 PNG 可以逐张下载,也可以打包带走,透明和设计稿分毫不差。
SVG vs PNG
这不是孰优孰劣的问题——矢量和像素解决的本来就是不同问题。SVG 始终是您的源文件:无限缩放、可编辑、体积小巧;PNG 只是一次性的导出品,用来应付拒收矢量的幻灯片、商店和上传表单。转换的永远是副本,别拿它替换原件。
| SVG | PNG | |
|---|---|---|
| 压缩方式 | 矢量(XML 文本) | 无损 |
| 透明度 | 支持(完整 Alpha) | 支持(完整 Alpha) |
| 动画 | 支持(CSS/SMIL) | 不支持 |
| 兼容性 | 所有浏览器;但常被上传表单拒绝 | 通用——所有浏览器、软件和系统 |
| 适合用途 | 标志、图标、插画 | 标志、截图、需要透明背景的图片 |
常见问题
不会。所有转换都通过 WebAssembly 在您的浏览器内完成,文件自始至终不会离开您的设备,全程没有任何服务器参与。页面加载完成后即使断网也能继续使用,文件大小也没有限制,仅取决于设备内存。
SVG 是矢量格式,本身没有固定的像素尺寸,输出分辨率由您自行决定。倍率会乘以 SVG 声明的尺寸:一个 100×100 的图标按 3× 导出,得到的就是 300×300 的图片。由于渲染直接来自矢量,任何倍率下边缘都完全清晰——建议一开始就选好实际需要的尺寸,而不是事后放大。
会——SVG 里未着色的区域在 PNG 中原样透明,和设计稿完全一致。所以要导出将来会放在未知背景上的标志和图标,这是正确的选择。
工具读取的是 SVG 声明的宽高,倍率在此基础上相乘。如果您的 SVG 只有 viewBox 而没有明确尺寸,浏览器会套用默认值——输出偏小的话,把倍率调到 3× 或 4× 就行。
内嵌内容(内联路径、Base64 图片)没有问题;引用外部文件或网络字体的部分可能渲染不出——栅格化时浏览器会拦截跨域加载。文字较多的 SVG,建议先在设计软件里把文字转成轮廓。
因为软件世界的另一半消化不了矢量:幻灯片、电商平台、应用商店页面、大多数上传表单和所有社交平台都只收像素。可行的工作流是:SVG 留作母版,按各个目的地需要的尺寸导出 PNG 副本——1–4 倍的倍率选择器正是为了让这些副本一次渲染到位,而不是事后再拉伸。
只要目的地真正支持矢量——您自己的网站、图标系统、设计交接——就别转。栅格化的标志被锁死在一个分辨率上;原件在任何尺寸下都锐利,体积通常还比一张大 PNG 更小。按目的地逐次栅格化,永远不要把它当作保存作品的方式。若是投放网页且在意体积,SVG转WebP 的副本比 PNG 更轻。
相关工具
SVG 转 JPG
在浏览器内把 SVG 转换为 JPG——免费、私密、无需上传。矢量图按选定的 1–4 倍倍率渲染,合成到干净的白色背景上,默认画质 90,专治只收 JPG 的平台。
SVG 转 WebP
在浏览器内把 SVG 转换为 WebP——免费、私密、无需上传。为矢量图生成体积最小的栅格副本,Alpha 透明完整保留,默认画质 85,尺寸由 1–4 倍倍率决定。
PNG 转 ICO(网站图标)
在浏览器内将 PNG 制作成多尺寸 ICO 网站图标——免费、无需上传。一个文件包含 16、32、48 px 三种尺寸,完整保留透明通道,可直接放到网站根目录使用。
SVG 转 ICO(网站图标)
在浏览器内把 SVG 矢量图转换成 ICO 网站图标——免费、无需上传。先按 4 倍尺寸渲染再缩小,16、32、48 px 每个尺寸都锐利到像素级别,透明效果与设计稿保持一致。