跳到主要内容
ConvertOwl

SVG 转 PNG - 转成你真正需要的那个尺寸

SVG 没有固定的像素数。它是一组绘图指令,所以转换器要回答的问题不是「这个文件里有什么」,而是「你想要多大」。这个工具一上来就问你这个问题:选一个倍数,或者直接填写精确的宽高,在渲染之前就能看到结果的像素尺寸。图形会按你选定的尺寸从矢量重新绘制,所以 4× 导出是真正四倍的细节,而不是放大的副本。整个过程都在你自己的设备上完成 - 浏览器读取文件,绘制到画布上,再编码成 PNG,不会上传哪怕一个字节。

如何使用此工具

  1. 放入你的 SVG

    把 SVG 拖到上方的方框里,或点击选择文件。单个文件最大 5 MB,可以一次添加多个。我们检查文件的真实内容,而不是相信文件名末尾的 .svg,所以 HTML 页面或改了名的 PNG 会被直接拒绝,而不是渲染到一半才出错。

  2. 确认我们读到的尺寸

    每个文件都会显示我们从中读出的源尺寸。如果 SVG 设置了 width 和 height,就用它们。如果只有 viewBox - 这是 Illustrator 和 Figma 的常见输出 - 就用 viewBox,那是设计师实际绘制时的尺寸。两者都没有时,我们会告诉你,并回退到 512 × 512。

  3. 选择输出尺寸

    在「倍数」和「精确尺寸」之间切换。倍数会把源尺寸乘以 1×、2×、4× 或你输入的任意数值。精确尺寸让你设定像素宽度,纵横比锁定会帮你算出高度。如果你确实想拉伸图形,解锁即可。

  4. 决定背景

    PNG 支持透明,我们默认保留,所以 SVG 从未绘制过的区域会保持透明。取消勾选可以把图形合成到白色背景上 - 当 PNG 要送去某些把透明渲染成黑色的地方时很有用,比如一些老旧的文档模板。

  5. 转换并下载

    点击「转换为 PNG」。每个文件都会按你选定的尺寸绘制并编码,各自带一条进度条。可以逐个下载,转换了多个时也可以打包成一个 ZIP 一次取走。

常见问题

如果 SVG 没有 width 和 height,我会得到多大的 PNG?

我们使用 viewBox。一个带 viewBox="0 0 200 50" 而没有宽高的 SVG 会转成 200 × 50 的 PNG,因为那是作者绘制时所用的坐标空间。浏览器的看法不同:问它会得到 300 × 75,那是没有固有尺寸的元素遗留下来的 CSS 默认值。我们读文件,而不是问浏览器。

如果 SVG 根本没有声明尺寸,连 viewBox 都没有呢?

那么文件里没有任何东西暗示尺寸,我们会使用 512 × 512,并明确告诉你发生了这件事。这只是一个起点,不是对你意图的猜测。切换到精确尺寸,填入你真正想要的数值即可;图形会按那个尺寸重新绘制,所以覆盖默认值不会损失任何东西。

为什么 PNG 里的文字和 SVG 里看起来不一样?

因为字体没有加载。SVG 里指定字体名称只是一个引用,字形本身并不在文件里。浏览器栅格化时,任何你没有安装的字体都会悄悄回退到宽度不同的默认字体,导致文字位移和重新换行。导出前在编辑器里把文字转为轮廓,就能完全一致。

透明度会被保留吗?

会,而且是默认行为。PNG 带有完整的 alpha 通道,所以 SVG 没有绘制的地方是真正透明的,而不会变成白色。半透明填充和柔和阴影也会保留各自的不透明度。如果你更想要实心背景,取消勾选透明选项,图形会在编码前合成到白色上。

SVG 里的 <script> 标签和远程图片会怎样?

它们永远不会运行,也永远不会加载。SVG 可以包含 JavaScript、远程图片引用和远程字体,这正是对来源不明的 SVG 需要谨慎的原因。我们会扫描每个文件并列出发现的此类内容,而我们采用的渲染方式从根本上阻断了这一切 - 没有脚本执行,也没有请求离开你的设备。

为什么按 2× 导出比事后放大 PNG 更好?

因为图形是重新绘制的,而不是重新采样的。在这里把倍数翻倍,会以更高分辨率重画每一条曲线,边缘在数学意义上保持锐利。放大一张已完成的 PNG 只能在已有像素之间插值,会让每一条边变软。这正是从矢量出发的全部优势,在小图标和细线条上最明显。

渲染尺寸有上限吗?

有 - 3200 万像素,且任一边不超过 16,384 像素,大约相当于 5600 × 5600,对多数图稿来说已经远超印刷分辨率。设这个上限是因为画布过大时浏览器不会报错,而是悄悄返回一张空白图,而一次静默的空白下载比一次明确的拒绝更糟。输入文件上限为 5 MB。

什么时候应该保留 SVG 而不是转换它?

只要目的地是网页,就该保留。SVG 徽标在每一块屏幕、每一个缩放级别上都保持锐利,通常比 PNG 更轻,还能用 CSS 重新着色。当目的地读不了 SVG 时再转成 PNG:邮件客户端、部分电商与印刷平台、社交媒体上传、老旧桌面软件,以及应用图标流水线。

我的文件会被上传到什么地方吗?

不会。转换完全在你的浏览器里进行,用的是任何网页绘制 SVG 时所用的同一个渲染引擎。你的文件不会发送到服务器,不会被存储,我们也永远看不到它。这也意味着没有排队等待 - 唯一的限制是你自己设备的速度。

有问题吗? 报告问题

指南与文章