内联svg直接写标签到html的或合法容器中即可，需删除xml声明和doctype，配viewbox与width/height，删子元素内联样式才能用css控制颜色和交互。
内联SVG怎么写进HTML里不报错
直接把 <svg></svg> 标签写在 HTML 文件的 （或任意合法容器）里就行，不需要额外加载、也不用 <object></object> 或 <img>。浏览器原生支持，只要语法闭合正确，就能渲染。
常见错误是复制 SVG 时带了 XML 声明（<?xml version="1.0" encoding="UTF-8"?>）或 —— 这些在内联场景下必须删掉，否则会解析失败或显示空白。
-
<svg></svg>必须有width和height（或至少一个 +viewBox），否则可能塌陷成 0×0 - 如果 SVG 里用了
<defs></defs>、<symbol></symbol>，确保引用路径（如<use href="#icon-home"></use>）ID 正确且在同一文档内 - 避免在
<svg></svg>外层再套<div style="display: none"> —— 有些旧版 Safari 对 display:none 里的 SVG 渲染异常 <h3>用CSS控制内联SVG的大小和颜色</h3> <p>内联 SVG 的元素（<code><path></path>、<circle></circle>等）能被 CSS 选中，但要注意：默认情况下，fill和stroke不继承父级 color，得显式设置或用currentColor。缩放推荐用
width/height+viewBox组合，而不是transform: scale()—— 后者会模糊边缘，且影响点击热区。- 统一配色：给
<svg></svg>设style="color: #333;"，内部用fill="currentColor"即可响应文字色变化 - 响应式尺寸：设
width="100%" height="auto"并确保viewBox存在（如viewBox="0 0 24 24"） - 禁用用户缩放：加
style="touch-action: none;"防止 iOS 上双指误操作触发缩放
内联SVG里怎么加交互事件
内联 SVG 的子元素支持原生 DOM 事件，比如
<circle onclick="alert('clicked')"></circle>或用 JS 绑定addEventListener。但注意：事件冒泡路径和普通 HTML 元素一致，<g></g>、<path></path>都能监听，无需额外 wrapper。- 点击穿透问题：如果 SVG 下面还有按钮，而
<svg></svg>没设pointer-events: none，它会挡住下方元素 —— 可对整个 SVG 设pointer-events: bounding-box或按需关闭 - hover 动效：直接写 CSS
svg:hover path { fill: red; }就行，但 IE11 不支持:hover在<path></path>上，得挂到<g></g>或外层<svg></svg> - 动态修改属性：JS 改
element.setAttribute('fill', 'blue')比改 style 更可靠，尤其对渐变或 pattern 引用
为什么SVG图标在某些安卓WebView里不显示
老版本 Android WebView（尤其是 4.4 及更早）对内联 SVG 的
fill、stroke解析有 bug，常表现为全黑或全透明。根本原因是缺少对 CSS 继承或currentColor的支持。- 兼容写法：在
<path></path>上硬编码fill="#333"，同时保留style="fill: currentColor"作现代浏览器降级 - 避免使用
<mask></mask>或<filter></filter>—— 这些在 Android 4.x WebView 中基本不可用 - 测试关键点：真机跑 Android 4.4 / 5.0，看是否所有路径都渲染；若失效，临时方案是 fallback 到 PNG
内联 SVG 看似简单，但 viewBox 缺失、XML 声明残留、Android 旧 WebView 的 fill 行为差异，这三个地方最容易卡住半天。
- 统一配色：给
