embed标签在2026年无法支持svg交互性，因主流浏览器已于2025年底移除npapi插件支持，导致svg加载后dom不可访问、事件不触发、css无效；内联svg是唯一可靠方案。
embed 标签在 2026 年**无法支持 SVG 交互性**，写上去大概率静默空白，且无可靠 fallback 机制。这不是配置问题，而是底层机制已失效。
为什么 embed 对 SVG 完全失效
所有主流浏览器（Chrome、Firefox、Safari、Edge）已在 2025 年底彻底移除 NPAPI 插件支持，而 embed 依赖该机制加载外部资源并提供执行上下文。SVG 文件通过 embed src="chart.svg" 加载后：
-
getSVGDocument()返回null或抛出SecurityError -
document.querySelector('svg path')查不到任何子元素——它们不在当前 DOM 树中 - 绑定的
click、mouseover事件全部不触发 - CSS 无法穿透作用到内部
<path></path>，.icon:hover path { fill: red }无效 - 无法读取或修改
d属性、transform、aria-*等语义属性
内联 SVG 是唯一可行路径
真正能响应 CSS、绑定事件、被 JS 查询和修改的 SVG，必须以文本形式直接写入 HTML 文档流。不是“引用”，而是“嵌入”。
- 删掉导出 SVG 中所有
fill、stroke、style内联属性（否则 CSS 覆盖失败） -
<svg></svg>必须带viewBox（如viewBox="0 0 24 24"），再配width/height或 CSS 尺寸 - 用
currentColor统一控制颜色：.icon path { fill: currentColor; }，换主题只需改父级color - 事件直接绑在
<path></path>上：<path onclick="handleClick()" ...></path>，或用 JSaddEventListener
如果必须用外部文件，object 比 embed 略好但仍有硬伤
object 在部分旧环境仍能加载 SVG 并暴露 contentDocument，但它存在三类不可绕过的问题：
- 跨域时
contentDocument被同源策略封锁（即使同站，若启用了 CSPframe-src限制也会失败） - IE11 及 Android 4.4 WebView 中，
object加载完成事件load不稳定，常需轮询contentDocument - 无法保证
contentDocument.querySelector('svg')返回有效节点——某些版本 Safari 会返回undefined - 所有现代框架（React/Vue/Svelte）对
object的生命周期管理极差，容易内存泄漏
服务端内联才是生产环境的务实解法
前端构建阶段把 SVG 文件内容读入模板，生成内联代码。例如 Webpack + svg-inline-loader，或 Vite 的 @svgr/plugin-vue。
- 避免运行时 HTTP 请求，减少首屏阻塞
- 可配合 PostCSS 自动清理内联样式、注入
viewBox - 支持 TypeScript 类型推导（如图标名 → 组件名）
- 服务端渲染（SSR）场景下，
embed和object都无法预渲染交互逻辑，只有内联 SVG 能保证首帧即交互
viewBox、统一用 currentColor —— 这些动作必须自动化，手工改一个图标省事，改一百个就必然漏。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
