index.html页面内怎么插入SVG矢量图？

最简单方式是用<img>标签引入SVG，但无交互能力；<object>可保留样式与事件控制；内联SVG最灵活但增大HTML体积；CSS Data URL适合小图标但需编码且不支持状态控制。

直接用 <img> 标签引入 SVG 文件最简单，但有交互限制

如果只是静态展示，<img src="icon.svg"> 是最快的方式。浏览器把它当普通图片处理，加载快、兼容性好（IE9+ 都支持），但 SVG 内部的 <path>、<circle> 等元素无法用 CSS 选中，也不能绑定 click 或 hover 事件。

常见错误是以为加了 class 或 id 就能样式控制——其实不行，因为 DOM 树里看不到 SVG 结构。

• 适用场景：图标、装饰性图形、不需要响应用户操作的图示
• 注意路径必须正确，相对路径以 index.html 所在目录为基准
• 可以加 alt 属性提升可访问性，但 screen reader 对 SVG 的支持仍弱于内联 SVG

用 <object> 嵌入 SVG 可保留交互和样式能力

<object data="chart.svg" type="image/svg+xml"></object> 会把 SVG 当作独立文档加载，它的 DOM 节点可被父页面 JS 访问（需等 load 事件），CSS 也能穿透作用（例如 object svg path { fill: red; }）。

但要注意：IE 和旧版 Edge 对 <object> 加载 SVG 的 load 事件触发不一致；部分移动端 WebView 可能静默失败且无报错。

立即学习“前端免费学习笔记（深入）”；

• 必须监听 object.onload 再操作内部元素，不能直接 document.querySelector('svg path')
• 如果 SVG 文件含 <script>，它会在独立上下文中执行，无法访问父页面变量
• 不建议用于大量小图标——每个 <object> 都是一次 HTTP 请求，影响性能

内联 SVG 最灵活，但文件体积和维护成本会上升

把 SVG 源码（从 .svg 文件里复制 <svg>...</svg> 整段）直接粘贴进 index.html，就变成页面 DOM 的一部分。此时所有子元素都可被 CSS 选中、JS 操作，动画、渐变、滤镜全都能用。

容易踩的坑是复制时漏掉 xmlns 属性（如 xmlns="http://www.w3.org/2000/svg"），导致部分浏览器渲染异常或 CSS 不生效；还有人直接把 .svg 文件拖进编辑器，结果带入了 BOM 字符或 UTF-8 签名，造成解析错误。

• 适合需要动态着色、状态切换（如按钮 hover 变色）、或配合 GSAP/Snap.svg 做复杂动画的场景
• 避免在 SVG 中写内联 style="..."，优先用 class + 外部 CSS，方便复用和主题切换
• 若 SVG 来自设计工具（Figma/Sketch 导出），先用 SVGOMG 清理冗余属性，减少体积

用 CSS background-image 显示 SVG 要注意编码和尺寸控制

把 SVG 写成 Data URL 放进 CSS：background-image: url("data:image/svg+xml,%3Csvg...%3E");。这种方式免 HTTP 请求，适合小图标，但 SVG 必须手动 URL 编码（< → %3C，> → %3E 等），否则解析失败。

更稳妥的做法是用构建工具（如 Webpack 的 svg-url-loader）自动处理；纯手写的话，推荐用在线编码器生成，别自己拼。

• 无法设置 SVG 内部元素状态（比如 hover 时改某个 <path> 的 fill）
• background-size 和 background-repeat 行为跟 PNG 一样，但默认不缩放 SVG——记得设 background-size: contain 或具体像素值
• IE 不支持 Data URL 超过 32KB，超出会静默失效

实际项目里，静态图标用 <img>，需要交互的图表用内联 SVG，多状态组件（如开关、进度条）优先内联。别为了“统一”硬套一种方式——SVG 的嵌入方式本质是权衡：可控性、加载性能、维护成本，三者永远在拉扯。