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