使用方法
- 选择一个 .svg 文件(最大 5 MB),或将 SVG 代码粘贴到输入框中。
- 选择缩放比例(例如为高像素密度屏幕选择 2×),或输入精确的像素宽度。
- 保留透明背景,或选择一种颜色。
- 查看预览并下载 PNG;如果浏览器支持,也可以下载 WebP。
工作原理
SVG 是一种矢量格式:它用数学方式描述图形,因此无论尺寸多大都能清晰呈现。PNG 由像素构成,是许多应用、文档、电子邮件客户端和社交网络要求的格式。此工具会使用浏览器自带的渲染器,按你选择的尺寸绘制 SVG,并将像素保存为 PNG。
初始尺寸取自 SVG 的 width 和 height 属性。绝对单位会转换为像素(1 in = 96 px,1 pt = 1.33 px)。如果只提供一个尺寸或没有提供尺寸,则使用 viewBox 确定比例和尺寸;两者都没有时,浏览器会使用 300 × 150。100% 等相对值无法针对独立文件计算,因此会改用 viewBox。
SVG 会作为图像加载,这是渲染不可信文件的安全方式:脚本不会执行,链接的图像、网页字体和 CSS 文件等外部资源也不会加载。依赖于设备上未安装字体的文本会使用后备字体绘制。系统会先检查 XML,因此输入错误时会显示清晰的错误提示,而不是空白图像。
示例
用 SVG 徽标制作应用图标
将 viewBox="0 0 64 64" 的徽标以 width 1024 导出,可生成 1024 × 1024 的 PNG,边缘清晰,可用于应用商店或 favicon 生成器。
适用于网站的 Retina 图片
将 1× 尺寸为 400 × 300 的插图按 2 倍缩放导出,可生成 800 × 600 的 PNG,在高像素密度屏幕上依然清晰。
用于幻灯片或文档
将图表 SVG 按 3 倍缩放并设置白色背景导出,可生成 PNG,方便粘贴到不支持 SVG 的演示文稿软件中。
常见问题
为什么文本的字体不对?
将 SVG 作为图像绘制时,不会加载网页上链接的字体。如果设备上安装了匹配的字体,则会使用该字体。若要确保字体效果一致,请在设计软件中将文本转换为轮廓,或将字体嵌入 SVG 作为 data URL。
为什么链接的图像没有显示?
将 SVG 作为图像渲染时,出于安全考虑,会阻止加载 SVG 内通过 URL 引用的图像。嵌入的图像(data: URL)可以正常使用。
最大输出尺寸是多少?
每边最多 16,384 px,总计最多 50 megapixels。导出包含复杂 SVG 的超大图像可能需要几秒钟,内存不足的手机上也可能失败。
转换来源不明的 SVG 安全吗?
在此处渲染是安全的:作为图像绘制的 SVG 无法运行脚本或加载外部资源。转换后的 PNG 仅包含像素。
隐私
你的 SVG 会由浏览器解析和绘制,不会上传、存储或纳入分析统计。