SVG插入HTML5编辑器需绕过其HTML过滤策略：优先配置allowHtml白名单，其次用data-url内联或object嵌入，动态加载须注意MIME类型与DOMParser解析。
直接往 HTML5 编辑器里塞
多数所谓“HTML5 可视化编辑器”（比如 GrapesJS、Toast UI Editor、CKEditor 5 的某些插件模式）默认会过滤或转义 标签，不是你写不进去，而是它被自动删了或变成纯文本。关键不在 SVG 本身，而在编辑器的 HTML 白名单策略。
- 先确认编辑器是否开启
allowHtml、html: true或类似配置项（GrapesJS 需设avoidInlineStyle: false+pluginsOptions: { html: { allowHtml: true } }） - 如果用的是富文本编辑器（如 TinyMCE），要手动在
valid_elements或extended_valid_elements中加入svg[*],defs[*],path[*],circle[*],rect[*]等标签白名单 - 别用「粘贴 SVG 代码」这种粗暴方式——很多编辑器会把
当作危险内容剥离，改用「源码模式」或「HTML 块插入」功能
用 data-url 内联 SVG 是最稳妥的绕过方案
当编辑器死活不放行 标签时，把 SVG 写成 base64 或 URL 编码后塞进 
- 在线工具如 SVG URL Encoder 可一键转义，注意去掉 SVG 文件开头的
和换行缩进，只留主体 - 编码后字符串可能含
#、&等特殊字符，必须用encodeURIComponent()二次包裹（尤其动态生成时） - 缺点：无法用 CSS 选中内部
fill等属性动态改色，仅适合静态图标
fetch() 动态加载外部 SVG 并注入 DOM 时，要注意同源和 MIME 类型
如果你在编辑器预览区或运行时环境里用 JS 加载 SVG，常见报错是 Failed to execute 'importNode' on 'Document': parameter 1 is not of type 'Node' 或空白不显示——大概率是服务端没返回 Content-Type: image/svg+xml，或者跨域没配 Access-Control-Allow-Origin。
- 本地开发时，Chrome 对
file://协议下fetchSVG 有严格限制，建议用http-server或 Vite 启个本地服务 - 加载成功后，别直接
el.innerHTML = svgText，要用DOMParser解析：const doc = new DOMParser().parseFromString(svgText, 'image/svg+xml')，再el.appendChild(doc.documentElement) - 如果 SVG 里有
引用，确保引用的fetch加载的 SVG 默认是隔离的
用
这是兼容性最好、编辑器最不容易干预的方式，尤其适合 SVG 动画或需要 JS 控制的场景，但代价是：父页面 JS 默认无法访问 内部 DOM（除非同源且等 load 事件后取 contentDocument）。
立即学习“前端免费学习笔记（深入）”；
-
比当作未知标签清空 - 若编辑器支持自定义组件（如 GrapesJS 的
addType('svg-embed')），建议封装成组件，把data属性作为可配置字段，避免用户手写易出错的 HTML - 注意：GitHub Pages、Netlify 等静态托管默认不给
.svg文件设对 MIME 类型，需加_headers或netlify.toml显式声明image/svg+xml
