内联SVG直接写<svg>标签即可，需保留xmlns="http://www.w3.org/2000/svg"和viewBox，删内联样式，用fill="currentColor"配合CSS控制颜色与缩放。
内联SVG怎么写进HTML里不破坏结构
直接把 <svg> 标签写在 HTML 文档流中即可，不需要 <img> 或 <object>。关键是要保留 SVG 的命名空间和语义完整性，避免浏览器解析出错。
常见错误是复制粘贴图标时漏掉 xmlns 属性，导致部分旧版 Safari 或 IE 渲染异常；或者把 <svg> 套在 <div> 里再加 display: inline-block，反而干扰原生行内行为。
- 必须保留
xmlns="http://www.w3.org/2000/svg"（XML 命名空间），即使现代浏览器大多宽容，但缺它可能让fill、stroke在某些上下文中失效 - 推荐用
viewBox替代固定width/height，例如viewBox="0 0 24 24"，这样 CSS 才能真正缩放 - 删掉原始 SVG 中的
style属性或内联fill="#000"，否则会覆盖 CSS 设置
CSS怎么控制SVG图标的颜色
SVG 内部元素（如 <path>、<circle>）的 fill 和 stroke 默认不继承父级文字颜色，必须显式设置或借助 currentColor。
最稳妥的方式是把图标所有可着色元素的 fill 设为 currentColor，然后靠父容器的 color 控制——这和字体变色逻辑一致，也兼容伪类（如 :hover）。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要写
svg { fill: red; }，它只影响<svg>自身（空元素无渲染），不起作用 - 正确做法：用
svg path, svg circle, svg polygon { fill: currentColor; }或更精准地加 class，比如.icon path { fill: currentColor; } - 如果图标含描边（
stroke），同样要设stroke: currentColor，否则 hover 时只有填充变色
怎么用CSS缩放SVG图标又不失真
依赖 viewBox 是前提；没有它，仅靠 width/height 或 transform: scale() 会导致像素模糊或布局抖动。
transform: scale() 看似简单，但会脱离文档流尺寸计算，容易引发父容器高度塌陷或点击区域偏移；而 font-size + em 单位配合 currentColor 是最稳定的一体化方案。
- 给
<svg>设置width: 1em; height: 1em;，再对父元素设font-size: 24px;，图标就跟着文字大小等比缩放 - 避免用
px固定宽高，否则响应式断点里得重复写多套 CSS - 慎用
transform: scale(1.5)：它不改变元素盒模型尺寸，margin、line-height还按原始大小算，容易错位
为什么有时候CSS改不了SVG颜色
原因通常不是 CSS 写错，而是 SVG 源码自带内联样式或 fill 属性，且优先级高于外部 CSS。
另一个隐蔽问题是使用了 <use> 引用 <symbol>，此时 currentColor 不会穿透到 <use> 实例内部——这是 SVG 规范限制，不是浏览器 bug。
- 检查开发者工具 Elements 面板，看目标
<path>上是否残留fill="black"类似属性，手动删掉或用!important覆盖（不推荐长期用） - 如果用
<svg><use href="#icon-home"></use></svg>，得确保<symbol>内部所有fill已设为currentColor，且<use>外层<svg>也要设fill: currentColor - 某些图标库导出的 SVG 含
<g fill="none">包裹，会抑制子元素继承，需删掉或改fill="currentColor"
真正麻烦的不是怎么写，而是每次从不同渠道复制 SVG 时，命名空间、内联样式、分组结构都不统一。建议建一个最小模板，每次粘贴后只保留 <svg> 开头、viewBox、xmlns 和路径内容，其余一律清空再上色。
