svg懒加载需用intersectionobserver监听容器，进入视口后动态设置image的href或xlink:href属性加载图片；初始仅保留结构，data-src存真实地址，加载后取消观察并注意兼容性与降级处理。

SVG图片本身不支持loading="lazy"属性，但可以通过IntersectionObserver监听SVG容器是否进入视口，再动态设置<image></image>的xlink:href（旧）或href（新）来实现懒加载。

SVG懒加载的核心思路

把SVG当作一个“占位容器”，初始时只保留结构（如<svg></svg>和空的<image></image>），不加载真实图片资源；当用户滚动到该SVG区域时，才注入图片URL并触发渲染。

• 适用于<svg><image xlink:href="..."></image></svg>（兼容IE/旧浏览器）
• 推荐用<image href="..."></image>（HTML5+SVG2标准，现代浏览器支持良好）
• 需为每个待懒加载的<image></image>预留data-src属性存储真实地址
• Observer监听的是SVG父容器（如<div class="svg-wrapper">），不是<code><image></image>本身

  基础实现步骤

  1. 标记SVG容器与懒加载图片：

  <div class="svg-lazy">
    <svg width="200" height="150" viewbox="0 0 200 150"><image width="200" height="150"></image></svg>
  </div>

  2. 初始化IntersectionObserver，监听所有.svg-lazy元素：

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const svg = entry.target.querySelector('svg');
        const img = svg.querySelector('image');
        const src = img.dataset.src;
        if (src) {
          img.setAttribute('href', src); // 或 xlink:href（兼容旧版）
          observer.unobserve(entry.target);
        }
      }
    });
  }, { threshold: 0.1 }); // 进入视口10%即触发
  
  document.querySelectorAll('.svg-lazy').forEach(el => observer.observe(el));

  注意事项与优化点

  确保懒加载行为稳定可靠，需关注以下细节：

  • 兼容性处理：Safari 13.1+ 支持href，旧版需回退到xlink:href（用img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', src)）
  • 避免重复加载：加载完成后调用observer.unobserve()，防止多次触发
  • 降级方案：若JS未执行或Observer不可用，可预先在<image></image>中设占位色块（fill="#f0f0f0"）或内联base64小图
  • 响应式SVG：若SVG使用width="100%"，确保父容器有明确宽高或最小尺寸，否则Observer可能无法准确判断可见性

  进阶：支持SVG Sprites与多图场景

  单个SVG中含多个<image></image>时，可统一管理：

  • 为每个<image></image>添加独立data-src，Observer触发后遍历加载全部
  • 结合getBBox()或getBoundingClientRect()判断子元素是否实际在视口内（适合长SVG内容）
  • 加载完成可添加loaded类，配合CSS过渡动画（如淡入）提升体验

  不复杂但容易忽略。