优先选svg：需无限缩放、多分辨率适配、动态交互或主题切换时；位图（png/jpg）适用于真实色彩、复杂细节及照片级图像。
选 SVG 还是位图（如 PNG、JPG），关键看图像“画的是什么”和“用在哪儿”。不是越新越好，也不是越小越优，而是匹配需求——清晰度、色彩、交互、性能、开发成本，一个都不能少。
需要无限缩放或适配多分辨率时，优先 SVG
比如网页图标、App 启动 Logo、响应式图表、SVG 动画组件。这些场景下，同一份资源要跑在 iPhone 小屏、Mac Retina 屏、甚至 4K 投影上。位图必须准备 1x/2x/3x 多套资源，体积翻倍、维护麻烦；SVG 一份代码，浏览器自动渲染清晰图形，不糊、不变形。
- 适用典型：导航栏图标、加载动画、数据可视化折线图、品牌 LOGO（尤其是单色或有限色块）
- 注意边界：如果图标含复杂渐变、阴影、纹理或照片级细节（如人像剪影带毛发），SVG 描述成本高，导出文件反而变大，此时 PNG-32 更实在
表现真实色彩与丰富细节时，位图更可靠
位图本质是“像素快照”，擅长还原光线、噪点、过渡、微纹理。JPG 擅长压缩风景照、产品主图；PNG-32 适合带半透明边缘的截图、UI 界面截图、带阴影的按钮效果图。
- 适用典型：商品主图、用户头像、设计稿截图、游戏贴图、带模糊/发光效果的 Banner 图
- 避坑提醒：别用 JPG 做图标——不支持透明，放大后边缘锯齿明显；也别用 PNG 存一张 5000×3000 的风景照，体积可能超 10MB，加载卡顿
涉及动态控制或主题切换时，SVG 更灵活
SVG 是 XML 文本，可被 CSS 或 JS 直接操作 fill、stroke、transform 等属性。夜间模式一键改图标颜色、悬停时路径描边变粗、点击触发路径动画——这些交互，位图只能靠换图或 Canvas 模拟，成本高、精度低。
- 适用典型：暗色模式适配的系统图标、仪表盘中可交互的流程图节点、表单验证状态图标（成功绿 / 错误红）
- 限制说明：微信小程序等平台若仅用
引入，则无法外部控制颜色——必须内联 SVG 或用组件库封装才能生效
考虑交付链路与团队能力再决策
设计师输出 SVG 文件，前端直接嵌入或用工具转成 React 组件，链路短、可控性强；但若设计师只给 PNG，临时转 SVG 可能失真（尤其手绘风格、水墨效果），Auto-trace 工具常把柔边变成硬轮廓，还得手动修路径。
- 推荐做法：项目初期就约定图标资产交付格式（如 Sketch → SVG 导出规范）、建立 SVG 图标库（用 iconfont 或自建 symbol sprite）
- 务实建议：简单几何图标（齿轮、箭头、叉号）全用 SVG；含文字、徽章、复杂插画的图，先评估转换质量，不行就保留高清 PNG-32 + srcset 响应式加载
