将SVG转换为PNG

为本无固定分辨率的图形定下分辨率

SVG没有像素，也没有尺寸。它是一组绘图指令——这条路径、那个填充、这条曲线——所以它在任何放大倍数下都保持清晰，Logo也应该尽可能长久地以SVG形式保存。栅格化则会永久锁定一个尺寸。所以请按图片将出现的最大位置来选择尺寸，并且记住，两倍或三倍像素密度的屏幕需要两倍或三倍的像素：一个以64点显示的图标，在现代手机上需要192像素才显得清晰。

文字是最容易出问题的地方，原因值得弄清楚。SVG写的是“用Helvetica Neue排这段文字”；如果渲染它的设备上没有Helvetica Neue，就会用别的字体替代，版式随之移位——原本放得下的标题现在溢出了文本框。通过URL引用的网络字体在这里根本不会加载，因为作为图片渲染的SVG被刻意隔离，无法访问网络。解决方法是每个设计师迟早都会学到的：导出前先把文字转为轮廓，字形就变成了路径，完全不需要字体。

同样的隔离也解释了其他意外情况。链接的位图——指向某处.png的image元素——渲染出来什么也没有。脚本不会运行，所以用JavaScript自行绘制的SVG会显示为空白或只画了一半。声明式动画按初始状态渲染，也就是第一帧的静态画面。所有自包含的内容都能完美呈现：渐变、滤镜、剪切路径、蒙版、内嵌的data URI图片和模糊效果都会按原样渲染。

PNG是这种转换的正确目标格式，JPEG则不是。矢量作品是纯色和硬边缘，这恰恰是PNG压缩得好、JPEG会毁掉的——JPEG里每条锐利边缘都会出现光晕。透明背景会转为真正的Alpha通道，所以按合适尺寸导出的Logo放在任何背景上都没问题。如果SVG完全没有声明尺寸，只有viewBox，宽高比就取自viewBox，尺寸由您来定。

如果您需要的是别的

resvg和rsvg-convert可以在命令行中渲染SVG，并能调用完整的字体库，所以文字会以原定字体而不是替代字体呈现——rsvg-convert -w 512 in.svg -o out.png就是完整的命令。Inkscape --export-type=png --export-dpi=300是对SVG规范实现最完整的软件，能处理轻量渲染器只能近似处理的滤镜和混合模式。

在栅格化之前，先确认是否真的需要PNG。所有浏览器原生显示SVG已有十多年，对网站上的Logo或图标来说，SVG体积更小、无限清晰，还能用CSS设置样式。真正需要像素图的场景比人们想象的少：网站图标（favicon）、社交分享预览图、电子邮件、应用商店素材，以及无法读取矢量图的软件。