内联svg是在线编辑器中唯一可靠且可交互的方式，需删除xml声明和doctype、补全viewbox、用currentcolor替代内联fill，并避免img/object嵌入。
直接在 HTML 中写 <svg></svg> 标签就能运行，不用额外服务、不依赖外部文件，所有主流在线编辑器（如 CodePen、JSFiddle、CodeSandbox）都原生支持。
内联 SVG 是唯一能真正交互和样式控制的方式
把设计工具导出的 SVG 源码（从 <svg> 到 <code>）粘进 HTML 编辑区即可。但常见错误会导致空白或失真：
- 复制了整份 SVG 文件，带
<?xml version="1.0" encoding="UTF-8"?>或→ 浏览器解析失败，删掉 - 只写了
width和height，漏了viewBox→ 图形拉伸、偏移或只显示一角；必须补上，例如viewBox="0 0 24 24" -
<path></path>上有fill="#000"这类内联属性 → CSS 的fill: red会被忽略；手动删掉所有子元素的fill、stroke、style - 想让图标随文字变色？把
fill="currentColor"写进<path></path>，再用父级color控制
别用 
在线调试时碰壁
看似简单，但在多数在线环境里它会白屏或报 MIME 错误 —— 因为 <img> 加载 SVG 需要服务器返回 image/svg+xml 类型，而在线编辑器的实时预览通常不提供该响应头。
-
document.querySelector("img svg path")永远是null：SVG 不进入 DOM，无法被 CSS 或 JS 访问 -
.icon:hover path { fill: red }完全无效 - 本地双击 HTML 文件也会失败，这不是 bug，是规范限制
- 如果只是临时测试静态图形，可改用 Data URL：
<img src="data:image/svg+xml,<svg%20viewBox='0%200%2024%2024'><circle%20cx='12'%20cy='12'%20r='10'/></svg>">（需 URL 编码）
object 嵌入在在线环境里基本不可靠
在线编辑器对 <object></object> 的跨域策略、load 事件触发、contentDocument 访问限制极严，90% 场景下会静默失败或报 SecurityError。
- 即使 SVG 文件同域，部分编辑器（如早期 CodePen）会拦截
contentDocument访问 -
obj.onload = () => { obj.contentDocument.querySelector("path") }很可能执行不到 - 每个
<object></object>都是一次 HTTP 请求，在线环境资源受限，加载慢且易超时 - 真需要复用外部 SVG？优先用
<use href="icons.svg#id"></use>+ SVG Sprite，但前提是在线平台允许托管 icons.svg 并正确返回 MIME 类型
最稳的路径就是删干净、加 viewBox、用 currentColor、内联到 里 —— 其他方式在线环境下要么失效，要么引入不可控的加载延迟和安全拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
