最省事的SVG引入方式是<img>标签，但无法用CSS修改内部颜色；需内联SVG或使用iconfont symbol方案才能实现动态着色与交互。
用 <img> 引入 SVG 文件最省事，但别指望改颜色
直接写 <img src="icon-menu.svg" alt="菜单"> 就能加载，浏览器原生支持、语义正确、还能加 loading="lazy"。但注意两点：一是服务器必须返回 image/svg+xml MIME 类型（Nginx/Apache 要配，否则旧 Edge 会拒载）；二是你没法用 CSS 改里面某个 <path> 的 fill —— 它就是一张图，和 PNG 没区别。
常见翻车现场：
- 把
icon.svg改成icon.png后缀再塞进src，结果空白 - 用 base64 写进
src却漏了data:image/svg+xml;base64,前缀 - 在 CSS 里写
img[src$="menu.svg"] { fill: red; }，完全没反应
要 hover 变色或动画？必须内联 <svg>
把 SVG 的 XML 代码（从 Figma 导出、Heroicons 复制，或 iconfont 的 symbol 片段）直接粘进 HTML，比如：
<svg viewBox="0 0 24 24" width="24" height="24"> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> </svg>关键动作有三个：
- 删掉开头的
<?xml ... ?>和<!DOCTYPE ...>，HTML 解析器见了就报错 - 保留
viewBox，删掉width/height（让 CSS 控制尺寸更灵活） - 给内部
<path>加fill="currentColor"，这样父元素设color: #007bff就自动染色
之后就能写 svg:hover path { fill: #e74c3c; } 或加 transition 动画了。
图标多又想统一管理？用 iconfont 的 symbol 方式
阿里 iconfont 创建项目后选「Symbol 引用」，下载包里有 iconfont.js 和 iconfont.css。引入顺序不能错：
<link rel="stylesheet" href="iconfont/iconfont.css"> <script src="iconfont/iconfont.js"></script>然后在页面任意位置用：
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-menu"></use> </svg>注意点：
-
xlink:href的#后面是图标 ID，不是类名（别写成#icon-menu-fill） - 必须等
iconfont.js执行完才能渲染，否则<use>是空的；如果 JS 异步加载，得监听document.addEventListener('iconfontReady', ...) - 多色图标支持，但 IE9+ 起步，老安卓 WebView 可能 fallback 到字体模式
别碰 <iframe> 嵌 SVG，除非你真需要沙箱
虽然 <iframe src="map.svg"> 技术上可行，但实际全是坑：
立即学习“前端免费学习笔记（深入）”；
- 默认带滚动条和边框，得额外写
border: none; overflow: hidden; - 同源策略卡死：父页 JS 拿不到 iframe 里的
contentDocument，iOS Safari 还可能吞 touch 事件 - 搜索引擎基本不索引 iframe 内容，SEO 友好性归零
- 图标类小图用它，纯属多一个 HTTP 请求 + 多一层渲染隔离
真正需要隔离上下文的场景极少，比如嵌第三方可交互图表且担心 XSS —— 那也建议优先用 <object>，它支持 contentDocument 访问（只要同源）。
