图标、Logo、简单几何图先考虑 SVG

SVG 保存的是矢量结构，不是固定像素网格。一个简单图标从 16px 放到 128px，边缘仍然可以保持锐利，所以它很适合界面图标、Logo、图表和几何插图。

复杂照片不适合硬转 SVG。路径数量爆炸以后，文件可能比位图更重，浏览器渲染也更麻烦。

PNG 更像“已经拍平的像素结果”

截图、像素画、带大量纹理的绘画或者必须逐像素保持外观的图片，用 PNG 更直观。它支持透明，也不用担心 SVG 内部结构被样式或脚本影响。

SVG 的嵌入方式会影响安全和无障碍

把 SVG 当普通 <img>，和把 SVG 代码直接内联到 HTML，能力不同。内联时可以操作内部元素，也意味着需要更认真处理不可信 SVG 的安全风险。

如果图形本身承载信息，还要提供合适的文字替代和可访问名称。W3C 的 SVG 可访问性规范也专门定义了 SVG 与辅助技术之间的映射。

一个简单判断

能用少量形状描述、需要多尺寸显示的 UI 资产，优先试 SVG；本质是照片、截图或复杂绘画，继续用光栅图。不要为了追求“现代格式”把所有图片都矢量化。