SVG 性能优化

<!-- 冗余：多个单独的 line -->
<g stroke="#333">
  <line x1="10" y1="10" x2="100" y2="10" />
  <line x1="10" y1="20" x2="100" y2="20" />
  <line x1="10" y1="30" x2="100" y2="30" />
</g>

<!-- 优化：合并为一个 path -->
<path d="M 10 10 L 100 10 M 10 20 L 100 20 M 10 30 L 100 30" stroke="#333" />

<defs>
  <symbol id="dot" viewBox="0 0 10 10">
    <circle cx="5" cy="5" r="4" />
  </symbol>
</defs>
<use href="#dot" x="0" y="0" />
<use href="#dot" x="20" y="0" />
<!-- 1000 个 use 比直接画 1000 个 circle 内存占用小 -->

<!-- 原始路径 -->
<path d="M 10.123456 10.234567 L 50.345678 10.456789 ..." />

<!-- SVGO 优化后 -->
<path d="M10 10L50 10..." />

npm install -g svgo

# 单文件（--multipass 允许多轮压缩直到不再变化）
svgo --multipass input.svg -o output.svg

# 批量
svgo --multipass -f input-dir -o output-dir

// .svgo.config.js（SVGO 3+ 的配置风格，插件用字符串或对象均可）
module.exports = {
  multipass: true,
  plugins: [
    // 默认插件集：合并路径、删元数据、压缩坐标等 20+ 项
    {
      name: 'preset-default',
      params: {
        overrides: {
          // 需要保留 id 时关闭个别插件（按需增删）
          cleanupIds: false,
        },
      },
    },
    // 移除 width/height 属性，让 SVG 完全响应外部 CSS（响应式场景常用）
    'removeDimensions',
    'sortAttrs',
  ],
};

<!-- 慢：模糊大区域 -->
<filter id="blur">
  <feGaussianBlur stdDeviation="10" />
</filter>
<rect width="1920" height="1080" filter="url(#blur)" />

<!-- 快：模糊小区域再缩放 -->
<filter id="blur-small" x="0" y="0" width="200" height="200">
  <feGaussianBlur stdDeviation="10" />
</filter>

// 慢：修改 x 触发布局计算
rect.setAttribute('x', 100);

// 快：transform 不参与布局，可被合成器加速
rect.style.transform = 'translateX(100px)';

.animated-element {
  will-change: transform, opacity;
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach((img) => {
  observer.observe(img);
});

<img data-src="large-diagram.svg" alt="图表" width="800" height="600" />

<!-- 内联首屏 Logo -->
<svg viewBox="0 0 100 40" class="logo">
  <path d="..." fill="currentColor" />
</svg>

<!-- 懒加载非关键 SVG -->
<img data-src="diagram.svg" alt="图表" loading="lazy" />

<img
  src="diagram.svg"
  alt="响应式图表"
  width="800"
  height="600"
  loading="lazy"
/>

img[src$='.svg'] {
  max-width: 100%;
  height: auto;
}

# nginx.conf
gzip on;
gzip_types image/svg+xml;

location ~* \.svg$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

<!-- 构建工具生成 -->
<img src="logo.a3b7c9.svg" alt="Logo" />

// 慢：逐个修改属性
elements.forEach((el) => {
  el.setAttribute('x', newX);
  el.setAttribute('y', newY);
});

// 快：批量修改
svg.style.display = 'none';
elements.forEach((el) => {
  el.setAttribute('x', newX);
  el.setAttribute('y', newY);
});
svg.style.display = 'block';

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const dot = createSVG('circle', { cx: i, cy: 50, r: 2 });
  fragment.appendChild(dot);
}
svg.appendChild(fragment); // 一次性插入

.chart {
  contain: layout style paint;
}

<svg viewBox="0 0 800 400" class="scatter">
  <defs>
    <symbol id="point" viewBox="-1 -1 2 2">
      <circle r="1" fill="#4f5bd5" />
    </symbol>
  </defs>
</svg>

<script>
  const svg = document.querySelector('.scatter');
  const data = [];
  for (let i = 0; i < 2000; i++) {
    data.push({
      x: Math.random() * 800,
      y: Math.random() * 400,
    });
  }

  // 批量插入，减少 reflow
  const fragment = document.createDocumentFragment();
  data.forEach((d) => {
    const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
    use.setAttribute('href', '#point');
    // use 的 x/y 是实例左上角：symbol viewBox 宽 2、use 尺寸 6，半径 3，
    // 因此左上角应为 (d.x-3, d.y-3) 才能让圆心正对数据点
    use.setAttribute('x', d.x - 3);
    use.setAttribute('y', d.y - 3);
    use.setAttribute('width', 6);
    use.setAttribute('height', 6);
    fragment.appendChild(use);
  });
  svg.appendChild(fragment);
</script>