为什么这里最重要的是那个尺寸框
本站其他转换器的输出尺寸都是显而易见的:跟输入一样。SVG 不是。它是一套绘图指令,不是一张像 素网格,所以 svg 转 png 这件事的核心其实是"选一个分辨率",这个选择就是整个操作的实质内容。
尺寸留空时,本工具用文件自己声明的值。那个值经常是 24 × 24,因为图标库都是按设计尺寸导出的, 而 24 像素的 PNG 基本不会是谁想要的东西。填上宽度之后,矢量会按那个分辨率重新渲染一遍,边缘 锐到格式允许的极限。和这里所有的位图工具不同,SVG 放大不仅允许,而且是常规操作,因为压根不 存在一个会被拉坏的原始像素网格。
别家转换器常翻车的 viewBox 问题
很多 SVG 只声明 viewBox,不写 width 和 height。Figma 和 Illustrator 都是这么导出的,
而且这是合法的:文件说明了自己占据的坐标空间,但不断言物理尺寸。
浏览器对这类文件报告的 naturalWidth 是 0。相信这个数字的转换器会什么都产不出来,或者给你一张
空白图——这正是很多在线 SVG 转换器偏偏在大家最常要转的那类文件上失败的原因。本工具会解析
viewBox,在渲染前把它作为明确尺寸补上,所以这些文件和别的没两样。
字体和外部引用
有两样东西在光栅化时不能可靠地保留,转 logo 之前都值得检查一下。
按名字引用的字体,需要那个字体真的装在做渲染的机器上。缺失时浏览器会默默换一个,你的字标就 变成了默认字体。导出前把文字转成轮廓,风险直接归零。
通过 URL 加载的外部图片和样式表会被拦掉。为了隐私,SVG 是从本地 blob URL 渲染的,那个上下文 取不到远程资源。自包含的文件(几乎所有 SVG 都是)不受影响。
你换到了什么,又交出了什么
你换到一个到处都能用的文件:PNG 在任何编辑器、任何 CMS、任何聊天软件里都打得开,不需要渲染器。
你交出的是可缩放性。PNG 被钉死在你选的那个分辨率上,所以视网膜横幅要一版、favicon 要另一版, 那是两次转换。把 SVG 当母版留着,需要哪个尺寸就现场光栅化一次。