直接用 <img> 标签引入 SVG 文件最简单，浏览器原生支持且语义清晰，但无法控制内部样式或交互；内联 SVG（<svg> 标签）才能用 CSS/JS 操作路径、实现变色动画等高级功能。
直接用 <img> 标签引入 SVG 文件最简单
只要 SVG 是独立文件（比如 icon.svg），用 <img src="icon.svg"> 就能加载，浏览器原生支持，语义清晰，还能设置 width、height、alt。
常见错误是把 SVG 当成 PNG 用——比如改后缀名或用 base64 写进 src 却不加 data:image/svg+xml;base64, 前缀，结果图片空白。
- 确保服务器返回正确的 MIME 类型：
image/svg+xml（Nginx/Apache 需配置，否则 IE/旧 Edge 可能拒载） - 不能通过
<img>控制内部元素样式（比如想 hover 时变色？不行） - 支持懒加载：
<img loading="lazy" src="logo.svg">
内联 SVG：把 SVG 代码直接写进 HTML
把 SVG 的 XML 内容复制粘贴到 HTML 中（即 <svg>...</svg> 块），才能用 CSS 选中并操作路径、组、文字等节点。
典型场景：按钮图标随状态变色、动画过渡、响应式缩放控制。
立即学习“前端免费学习笔记（深入）”；
- 必须移除 SVG 文件开头的
<?xml version="1.0" encoding="UTF-8"?>和 DOCTYPE 声明，否则 HTML 解析报错 - 推荐保留
viewBox属性，删掉width/height（让 CSS 控制尺寸更灵活） - 如果原 SVG 有
id，注意全局唯一性，避免多个内联 SVG 冲突（可脚本批量重命名）
用 <object> 嵌入 SVG 并保持交互能力
<object data="chart.svg"></object> 能加载 SVG 并允许 JS 访问其 DOM（比如绑定 click 事件到某个 <path>），也支持 fallback 内容。
但兼容性比 <img> 差：Safari 对跨域 <object> 的 script 访问有限制；部分安卓 WebView 不触发 load 事件。
- 务必监听
object.onload或用object.contentDocument延迟访问内部节点（否则 JS 执行太快会取不到） - fallback 内容写在
<object>标签体内，如<p>图表加载失败</p> - 不推荐用于图标类小图——多一个 HTTP 请求，且无法被 CSS 统一缩放
避免用 <iframe> 嵌 SVG
虽然技术上可行（<iframe src="map.svg"></iframe>），但实际几乎没优势：
- 默认有边框和滚动条（需额外 CSS 重置）
- 同源策略严格限制父页 JS 访问 iframe 内 SVG DOM
- SEO 友好性差，搜索引擎通常不索引 iframe 内容
- 移动端 touch 事件可能被截断（尤其 iOS Safari）
除非你明确需要沙箱隔离，否则别碰它。
真正麻烦的是 SVG 中的外部引用（比如 <image href="photo.jpg">）——这些路径在内联或 <object> 场景下会相对当前 HTML 页面解析，不是相对 SVG 文件位置。这点容易忽略，导致图片 404。
