SVG性能问题源于不当使用：内联过多阻塞渲染、缺失viewBox导致CPU光栅化、过度滤镜引发离屏渲染、服务器配置不当影响缓存。应采用symbol/use复用、IntersectionObserver延迟加载、CSS缩放、精简导出文件。
SVG 本身不会让 HTML5 变慢，但不当使用会让渲染变卡、内存涨、首屏延迟——关键不在“用不用”，而在“怎么用”。
大量
每个内联 都是独立 DOM 子树，100 个 SVG 就是 100 次 DOM 插入 + 样式计算 + 布局触发。尤其在 顶部或循环中生成时，浏览器会反复重排。
- 避免在
v-for/map()中直接拼接大段字符串 - 把重复图标抽成
，共用一份 DOM 结构 - 非首屏 SVG 延迟到
IntersectionObserver触发后再插入
viewBox 缺失或缩放不当导致 GPU 渲染降级
没有 viewBox 的 SVG 会被当作位图处理；而用 width/height 粗暴缩放（比如从 24×24 拉到 200×200）会触发 CPU 光栅化，失去矢量优势。
- 所有 SVG 必须带
viewBox="0 0 w h"，且宽高比与内容一致 - 缩放统一用 CSS
transform: scale()，而非修改width/height - 避免在
上设font-size或filter，它们强制启用层合成
过度使用
每个
立即学习“前端免费学习笔记（深入）”；
- 用
feOffset替代feGaussianBlur做阴影（性能差一个数量级） -
clip-path: polygon()实现简单裁剪 - 动态滤镜（如 hover 模糊）务必加
will-change: filter提前声明
用 
看似省事，但服务器若返回 Content-Type: text/plain 或未开启 Gzip，SVG 文件体积可能翻倍；更糟的是，部分 CDN 会把 .svg 当作静态资源强缓存，改了图标不更新。
- 确认响应头含
Content-Type: image/svg+xml - Nginx/Apache 配置对
.svg启用gzip和Cache-Control: public, max-age=31536000（版本化文件可用） - 开发期用
真正拖慢页面的从来不是 SVG 格式，而是没关掉的开发者工具、忘了删的 console.log、以及把整个 Figma 导出 SVG 直接扔进 HTML —— 那些路径节点数过万、带多余
