内联SVG时xmlns属性必须保留以确保渐变、滤镜等特性正常工作，尤其在Safari和旧Edge中；仅含简单图形且无高级特性的可删，但保留更稳妥。
内联 SVG 时为什么 xmlns 属性有时必须保留、有时又该删？
HTML5 中 <svg> 标签默认就在 SVG 命名空间下，所以省略 xmlns="http://www.w3.org/2000/svg" 通常不影响渲染；但若 SVG 含 <defs>、<linearGradient>、<filter> 等依赖命名空间的特性，漏掉它会导致渐变不显示、滤镜失效或 CSS 选择器匹配不到元素（尤其在 Safari 和旧 Edge 中）。
实操建议：
- 从 Figma / Illustrator 导出的 SVG 带
xmlns—— 直接保留，别手贱删 - 自己手写简单图标（只有
<path>、<circle>）且不涉及渐变/滤镜 —— 可安全删掉xmlns，减少冗余 - 不确定时，加个
xmlns没坏处；删了出问题，再补回来要排查半天
<img src="icon.svg"> 加载失败常见原因和验证步骤
不是代码写错，而是环境或配置卡住：本地双击 HTML 文件打开时，file:// 协议下多数浏览器拒绝加载 SVG（报 MIME 类型错误），服务器没配 image/svg+xml 响应头也会静默失败。
快速验证与修复：
立即学习“前端免费学习笔记（深入）”；
- 用
curl -I your-domain.com/icon.svg查响应头，确认含Content-Type: image/svg+xml - 本地开发时改用
http-server或 VS Code Live Server 启服务，别双击 HTML - 加
loading="lazy"防阻塞，但别指望它解决加载失败 —— 这只是优化，不是兜底 - Android 4.4 WebView 有已知 SVG 渲染 bug，若需兼容，优先降级为 PNG fallback 或改用内联
用 <object> 加载外部 SVG 时 JS 访问内部 DOM 的边界条件
obj.contentDocument 不是随时能用的 —— 它只在同源、且 SVG 加载完成之后才可用；跨域 SVG 会直接被浏览器拦截，控制台报 Blocked a frame with origin 'xxx' from accessing a cross-origin frame。
安全访问方式：
- 监听
load事件后再取contentDocument：obj.addEventListener('load', () => { obj.contentDocument.querySelector('path'); }) - IE 和部分安卓 WebView 中
load可能不触发，加setTimeout兜底（如 500ms 后尝试读取） - 别在 SVG 文件里写
<script>并指望父页面 JS 控制它 —— 那段脚本在独立上下文执行，和父页无直接通信通道 - 需要频繁交互？不如直接内联，省去跨上下文桥接的麻烦
SVG 代码体积大时怎么避免拖慢首屏渲染
内联 SVG 虽灵活，但一个 20KB 的图表 SVG 塞进 HTML，会显著拉长 DOMContentLoaded 时间，尤其移动端解析慢；而 <img> 或 <object> 是异步加载，但牺牲交互能力。
折中方案：
- 复杂 SVG（如地图、数据图表）用
<object>+loading="eager"，配合骨架屏占位 - 图标类 SVG 用
<symbol>+<use>技术合并到单个内联文件，复用率高且只加载一次 - 必须内联又怕体积大？用
svgo压缩，删注释、冗余属性、自动精度归一化 —— 压缩后体积常减少 30%~60% - 别把整段
<path d="M0 0 L100 100...">拼进innerHTML—— 移动端解析卡顿明显，改用document.createElementNS()动态创建
真正难的不是选哪种方式，而是同一项目里混用多种嵌入方式时，CSS 作用域、JS 作用域、响应式行为全都不一致 —— 比如 currentColor 在内联里生效，在 <object> 里得靠 fill="inherit" 才行，这种细节漏掉，颜色就断掉了。
