内联SVG最简用法是直接写标签，支持CSS/JS操作；必须设viewBox实现缩放适配；fill/stroke需用currentColor继承主题色；复用须同域且ID前置。
SVG 标签直接写进 HTML 就能用，不用额外加载
HTML 中嵌入 SVG 最简单的方式就是把 <svg></svg> 元素当成普通 HTML 标签写进去，浏览器原生支持，不需要 JS、不依赖 CDN、也不用转 base64。它和 <div> 一样是 DOM 节点，能加 class、绑定事件、用 CSS 控制样式。
<p>常见错误现象：<code>img src="icon.svg" 加载失败但本地预览正常；或者用 iframe 嵌入导致样式隔离、交互受限、SEO 不友好。
- 适合图标、小图表、可交互按钮等需要动态修改的场景
- 避免用
<img alt="HTMLSVG怎么嵌入页面_HTML矢量图形标签添加说明【教程】" >引用 SVG 文件——会失去对内部<path></path>的控制，也无法响应 :hover 或 JS 操作 - 注意
<svg></svg>默认 display 是 inline，常需加display: block或vertical-align: middle防止底部留白 - 如果 SVG 来自设计稿导出，检查是否含冗余
<defs></defs>、<style></style>或外部引用（如url(#gradient)），这些在内联时可能失效
用 viewBox 控制缩放和适配，别只靠 width/height
viewBox 是 SVG 可缩放的核心，它定义了坐标系范围，让 SVG 在不同尺寸下保持比例和清晰度。只设 width 和 height 而不设 viewBox，会导致图形拉伸变形或裁剪。
使用场景：响应式页面中图标随容器缩放、Retina 屏适配、CSS 动画缩放 SVG 内部元素。
立即学习“前端免费学习笔记（深入）”；
-
viewBox="0 0 100 100"表示逻辑画布宽高为 100×100 单位，所有<circle cx="50"></circle>都基于这个坐标系 - 设了
viewBox后，width和height只控制占位大小，内容自动缩放填充 - 漏掉
viewBox是最常见兼容性问题——IE9+ 和所有现代浏览器都要求它才能正确渲染缩放行为 - 不要写
viewBox="0 0 0 0"或负值，会触发解析错误，浏览器可能静默忽略整个 SVG
内联 SVG 的 CSS 样式优先级和继承规则很实在
SVG 元素默认继承父级 color、font-family 等文本相关属性，但 fill/stroke 默认不继承，得显式写 fill="currentColor" 才能跟着文字颜色走。
常见错误现象：SVG 图标在 dark mode 下突然变黑/消失；hover 时颜色没变；用 CSS 变量控制 fill 失效。
-
fill和stroke默认值是black，不是currentColor，所以要手动设才响应主题色 - CSS 选择器能精准控制子元素，比如
svg:hover path { fill: red; }完全可行 - 避免在 SVG 内联 style 中写
fill: #333—— 会覆盖外部 CSS，调试时难定位 - 用
currentcolor替代硬编码颜色，既简洁又支持 theme 切换：<path fill="currentColor" d="..."></path>
用 <use></use> 复用符号时路径必须同域且已定义
<use href="#icon-home"></use> 是复用 SVG 符号的常用方式，但它不是“导入”，而是 DOM 引用。如果目标 <symbol></symbol> 没加载、ID 错了、或跨域了，就会显示为空白，控制台通常不报错。
使用场景：页面多个位置用同一套图标，减少重复代码；配合 <defs></defs> + <symbol></symbol> 实现图标库管理。
-
<symbol id="icon-home"></symbol>必须出现在<use></use>之前，且在同一 HTML 文档内（不能跨 iframe 或外部文件） -
href值必须带#，写成href="icon-home"会失效 - Webpack/Vite 构建时若抽离 SVG 到单独文件，
<use href="icons.svg#home"> 属于外部引用，在多数浏览器中被禁用（CORS 限制）</use> - 推荐方案：把所有
<symbol></symbol>放在页面顶部隐藏容器里（如<svg style="position: absolute; width: 0; height: 0;"></svg>），再全局<use></use>
复杂点在于，SVG 的命名空间、ID 唯一性、以及构建工具对内联资源的处理，三者稍有错位，图标就悄无声息地不见了。
