内联SVG是否影响性能取决于内联内容：只内联精简的首屏图标，删除冗余代码，用+复用，避免样式陷阱；Base64适合静态装饰图标。
内联 SVG 会增大 HTML 体积，但不一定拖慢首屏
直接把 <svg></svg> 块写进 HTML 是最常见做法，但它是否“性能损耗”取决于你内联的是什么。一个带 200 行路径、含 <defs></defs> 和滤镜的 SVG，和一个删干净只剩 <path d="..."></path> 的 3 行图标，对解析与渲染的影响天差地别。浏览器解析 HTML 是单线程的，长字符串会阻塞 DOM 构建；而现代引擎对结构清晰、无冗余属性的 SVG 解析极快。关键不是“该不该内联”，而是“内联什么”。
- 只内联关键首屏图标（如导航栏、按钮图标），非首屏图表、懒加载模块一律不内联
- 删除所有
<?xml>、、<code>xmlns:xlink（HTML5 中非必需） - 确保每个
<svg></svg>都有viewBox，但移除width/height属性——尺寸交由 CSS 控制更灵活 - 避免在内联 SVG 中写
<style></style>标签，它会触发全局样式注入，且无法被框架封装隔离
用 <symbol>+<use></use></symbol> 复用图标，别重复粘贴 <svg></svg>
把同一图标复制 10 次到 HTML 里，看似“内联了”，实则体积翻 10 倍、DOM 节点暴增、维护成本飙升。真正高效的做法是集中定义 <symbol></symbol>，再用 <use></use> 引用。它本质是 DOM 模板复用，不是字符串拷贝。
-
<symbol></symbol>必须放在文档可访问位置，推荐开头或紧贴根节点，不能包在<div style="display:none"> 或 <code><template></template>里 -
<use href="#icon-home"></use>在 Safari 12–15 有缓存 bug，若需兼容，加xlink:href双写，或确保 sprite 已提前解析完成 - 每个
<symbol></symbol>的id必须唯一，禁止含空格、中文、特殊符号（如icon-home@2x会失效） -
<use></use>不继承父级fill，必须写fill="currentColor"，靠外部.icon { color: #007bff; }控制颜色 - 别给
<use></use>元素直接设fill或stroke—— 它不渲染图形，只是引用占位符 - 想 hover 变色？写
.icon:hover path { fill: red; }，而不是.icon:hover { fill: red; } - 移动端缩放模糊？加
shape-rendering="crispEdges"到<svg></svg>根标签，或 CSS 中加image-rendering: crisp-edges; - 图标和文字不对齐？
<svg></svg>默认是inline元素，加vertical-align: middle;或改display: inline-block; - 适合场景：纯装饰性图标、背景图、
<img alt="怎么利用HTML内联SVG标签避免性能损耗" >标签引用（<img src="data:image/svg+xml;base64,..." alt="怎么利用HTML内联SVG标签避免性能损耗" >） - 注意 URL 编码：原始 SVG 中的双引号、尖括号、换行必须 URL 编码，否则
data:URL 会截断；推荐用encodeURIComponent处理字符串后再拼接 - 体积阈值：单个 Base64 SVG 超过 2.5KB 时，编码后膨胀 + HTTP 缓存失效风险上升，不如走独立文件
- 不支持
currentColor：Base64 中的fill="#000"是硬编码，换主题色必须生成新字符串
内联 SVG 后，CSS 控制要避开这些坑
内联 SVG 的最大价值是让 path、circle 等子元素暴露在 DOM 中，能被 CSS 选中。但很多样式写法会失效或引发兼容问题。
比内联更轻的替代方案：Base64 data URL
当 SVG 图标已固定、无需 CSS 动态控制颜色或动画时，data:image/svg+xml;base64,... 是更小体积、零解析开销的选择。它把整个 SVG XML 当作字符串编码，浏览器不解析其内部结构，只当作图像资源解码渲染。
立即学习“前端免费学习笔记（深入）”；
<symbol></symbol>，该剥离的删掉命名空间，该交给 CSS 的就别塞进 XML 字符串里。
