核心区别：数学与像素
SVG 是矢量。文件里存的不是一格格彩色的点，而是指令：在这里画一个圆、填成蓝色、从这个点连一条线到那个点。浏览器读取这些指令，按你要求的任意尺寸重新绘制图形。缩到邮票大小还是放大到广告牌，边缘始终锐利，因为每次都会重新计算。
PNG 是位图。它存储的是一张真实的像素网格，每个像素颜色固定。这张网格有既定的分辨率。放大超过原始尺寸后，浏览器只能猜测像素之间该填什么，边缘就会变得柔和且有锯齿块。PNG 还支持透明，因此在需要叠放于彩色背景上的图形上胜过 JPEG。
所以分界线很简单。SVG 由数学绘出，可无限缩放；PNG 是一张固定的像素照片，在制作时的尺寸下效果最佳。
SVG 的优势场景
凡是由干净形状构成的图形都该用 SVG。徽标、图标、UI 元素、线稿、图表、扁平插画。它们由路径和填充组成，正是 SVG 最擅长描述的东西，因此文件极小。一个简单图标可能只有几百字节。
另外两个优势也很重要。SVG 永远可编辑，因为形状仍然是形状，没有被固化成像素。你可以随时重新打开它，改个颜色，挪动一个点。而且由于可无限缩放，一个 SVG 徽标就能同时用作网站图标、页头和印刷横幅，无需二次导出。
PNG 的优势场景
照片以及任何带有精细细节、渐变或纹理的图像都该用 PNG。一张照片在画面中有成千上万种细微不同的颜色，用矢量形状去描述它荒谬至极，文件也会庞大无比。用像素存储才是老实的做法。
当你需要带透明通道的位图时，PNG 也是稳妥之选，比如抠掉背景的产品图，或带圆角的截图。它的支持极其广泛，没有软件会拒绝它。
快速决策指南
当图像是徽标、图标、符号、图表或扁平插画时；需要缩放到不同尺寸时；或者以后还想继续编辑时，用 SVG。
当图像是照片或包含摄影级细节时；需要带透明的固定尺寸位图时；或者要交付给只接受像素的系统时，用 PNG。
一个实用技巧：许多团队先用 SVG 设计图形，再按目标平台需要的精确尺寸导出 PNG。这样你既有干净可编辑的母版，也有平面交付文件，都出自同一个源文件。
编辑 SVG，两种都能导出
如果你经常处理矢量图形，最好用一个文档本身就是 SVG、而不是最后再导出一份副本的工具。Rayzia 就是这样构建的免费浏览器端编辑器：你编辑的文件就是 SVG。完成后可以导出 SVG 作为可缩放的母版，也可以在平台需要像素时导出 PNG。它可在任何浏览器中运行，无需安装，一分钟内就能打开编辑器用真实文件试一试。
常见问题
SVG 比 PNG 更好吗？
总体上没有谁更好，它们解决的是不同问题。SVG 更适合徽标、图标和扁平插画，因为它可缩放到任何尺寸并保持可编辑。PNG 更适合照片和细节丰富的图像，因为它们本就由像素而非形状构成。按图像的实际内容来选。
我能把 PNG 转成 SVG 吗？
大多数情况下无法干净地转换。PNG 是像素，要把像素还原成矢量形状必须做描摹，而描摹是在猜测轮廓，很少能与原图一致。对于对比强烈的简单图形（如纯色徽标）效果尚可，对照片则不行。如果可以选择，从一开始就把原稿保留为 SVG。
为什么我的 PNG 徽标放大后会模糊？
因为 PNG 的像素数量是固定的。放大超过原始尺寸后，软件不得不凭空造出原本不存在的像素，边缘就变得模糊。存成 SVG 的徽标完全没有这个问题，因为它在每个尺寸下都由数学重新绘制。
SVG 像 PNG 一样支持透明吗？
支持。SVG 支持透明、半透明和混合模式，而且往往比 PNG 更灵活。两者的区别不在透明，而在图像的存储方式：SVG 存形状，PNG 存像素。