SVG懒加载需用IntersectionObserver监听容器，进入视口后动态设置image的href或xlink:href属性加载图片；初始仅保留结构，data-src存真实地址，加载后取消观察并注意兼容性与降级处理。
SVG矢量图本身体积小、可缩放、支持脚本控制，但若页面中大量使用且不加区分地一次性加载，仍会拖慢首屏渲染。真正有效的优化，是让非关键SVG“等一等”——等用户滚动到它附近，或等核心内容就绪后再加载。
用 Intersection Observer 实现精准懒加载
现代浏览器推荐使用 Intersection Observer API 替代 scroll 事件监听，性能更好、更可靠：
- 为需要懒加载的容器添加 class（如 svg-lazy），内部可放占位 SVG 或空
<svg></svg> - 初始化 observer 时设置 threshold: 0.1，表示元素 10% 进入视口即触发
- 在回调中动态插入真实 SVG 内容（内联）或设置
<image href>属性（外部引用） - 加载完成后立即调用 observer.unobserve(el)，避免重复执行
兼容旧版浏览器的降级处理
不是所有环境都支持 href 属性直接赋值，尤其 Safari 13.1 之前版本需用命名空间方式：
- 检测是否支持
img.setAttribute('href', src)，不支持则改用img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', src) - 外链 SVG 加载失败时，建议 fallback 到内联占位 SVG（含
<rect>和文字提示），避免空白或布局塌陷 - 若 JS 未执行或 observer 不可用，可在 HTML 中预先写好轻量占位结构，确保视觉稳定
结合 Vue 等框架的实用配置
在 Vue 项目中，vue-lazyload 支持 SVG，但需注意初始化逻辑：
- loading 和 error 选项建议指定为 SVG 文件（如
loading: 'assets/loading-ring.svg'），保持矢量一致性 - 启用 preLoad: 1.3，让 SVG 在进入视口前就提前加载，减少“闪动”感
- 对 logo 类 SVG，可配合
loading="lazy"（仅适用于<img>标签引入的 SVG），但要注意：该属性对内联 SVG 无效
内联 SVG 的延迟加载技巧
内联 SVG 无法触发原生 load 事件，也不能直接用 loading="lazy"，需手动控制：
- 初始只渲染极简占位结构（例如带背景色的
<svg><rect fill="#eee"/></svg>） - 通过 data 属性存真实 SVG 内容（Base64 编码或 URL），滚动触发后用
innerHTML插入或fetch加载后解析 - 若 SVG 含动画（如 SMIL 或 CSS @keyframes），插入后再启用，避免过早计算样式
