picture标签中svg与png需通过source的type和media显式区分：svg必须放在type="image/svg+xml"的source中且srcset仅写纯路径（如srcset="logo.svg"），不可加w/x描述符；png则用普通source配合srcset的x描述符；media须用合法语法如"(min-resolution: 2dppx)"，顺序从宽到窄，并以img的png为fallback。
picture 标签里怎么写 srcset 才能区分 SVG 和 PNG
SVG 是矢量图，放大无损；PNG 是位图，依赖分辨率。浏览器不会自动根据屏幕像素密度或 DPR 选 SVG，<picture></picture> 必须靠 media 属性显式控制切换逻辑，不能只靠 srcset 的 x 描述符——后者只对位图生效，对 SVG 无效。
常见错误是把 SVG 写进 srcset 并指望 2x 触发它，结果所有浏览器都加载了 PNG，SVG 完全被忽略。
-
<source></source>的media必须匹配实际设备能力，比如(min-resolution: 2dppx)或(min-width: 768px)，不能写成(resolution >= 2dppx)（语法非法） - SVG 必须放在
<source></source>的srcset中，且该<source></source>的type应设为"image/svg+xml"，否则部分浏览器（如 Safari）可能拒绝加载 - fallback 的
<img>的src建议用 PNG，不要用 SVG——否则当 JS 禁用或解析失败时，SVG fallback 可能因 MIME 类型问题无法显示
为什么 Safari 对 picture + SVG 的 media 查询特别挑剔
Safari（尤其 iOS 15–16）对 min-resolution 的解析严格遵循 CSS 规范，不支持旧写法 -webkit-min-device-pixel-ratio，也不识别 dppx 以外的单位（如 dpi）。如果写成 (min-resolution: 192dpi)，Safari 直接跳过该 <source></source>，降级到 <img>。
实测有效写法只有两种：
-
media="(min-resolution: 2dppx)"—— 推荐，兼容 Chrome/Firefox/Safari -
media="(min-device-pixel-ratio: 2)"—— 仅适用于 Safari 和旧版 Android，但 Firefox 已弃用，不建议单独使用
更稳妥的做法是用两个 <source></source> 并列，覆盖不同浏览器：
<picture><source type="image/svg+xml" media="(min-resolution: 2dppx)" srcset="logo.svg"><source type="image/png" srcset="logo-1x.png, logo-2x.png 2x"> @@##@@ </source></source></picture>
SVG 作为 srcset 项时要不要加尺寸参数
不需要，也不应该加。SVG 是矢量格式，srcset 中的 w 或 x 描述符对它无意义。写成 srcset="logo.svg 2x" 不报错，但浏览器会忽略 2x，只当普通 URL 处理；而写成 srcset="logo.svg 100w" 反而可能导致 Chrome 拒绝加载（解析失败）。
- SVG 的
<source></source>的srcset值保持为纯路径：如srcset="icon.svg" - 如果需响应式缩放 SVG，应靠 CSS 的
width/height或viewBox控制，而非靠srcset的尺寸提示 - 多个 SVG 变体（如暗色/亮色主题）可用
media切换，但每个<source></source>的srcset仍只写一个 SVG 路径
如何验证 picture 是否按预期加载了 SVG
别只看页面渲染效果——SVG 和高清 PNG 渲染出来可能一模一样。真要确认，得查网络面板：
- 在 DevTools 的 Network 标签页过滤
svg，刷新页面，看是否发起logo.svg请求 - 禁用 PNG 对应的
<source></source>，再刷新，如果 SVG 没加载，说明media条件未命中（比如当前屏幕 DPR 实际是 1x） - 用 iOS 模拟器或真机测试，Safari 的响应式行为和桌面 Chrome 有差异，尤其在横竖屏切换时
device-pixel-ratio可能延迟更新
最易被忽略的是：本地文件协议（file://）下，部分浏览器（如 Chrome）会因安全策略阻止 SVG 的 MIME 类型识别，导致 type="image/svg+xml" 失效——务必用本地服务器（如 python -m http.server）测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
