只有内联SVG才能被CSS控制颜色和大小，即SVG代码需直接写入HTML中，如<svg><path></path></svg>或<use href="#my-icon">；外部引用的SVG无法通过CSS修改fill、width等属性。
内联SVG才能被CSS控制颜色和大小
用 <img src="icon.svg"> 或 background-image: url(icon.svg) 加载的 SVG，CSS 的 fill、width 都完全无效——浏览器把它当图片处理，路径不在 DOM 里，样式进不去。
真正能控制的前提只有一个：SVG 代码得直接出现在 HTML 中，也就是“内联”。比如手写 <svg><path d="..."></svg>，或用 JS 插入 innerHTML。用 <use href="#my-icon"> 引用页面内已定义的 <symbol> 也属于内联，同样可控。
- ✅ 正确：
<svg class="icon"><path fill="currentColor" d="..."></svg> - ❌ 错误：
<img src="logo.svg">、<object data="icon.svg"></object> - ⚠️ 注意：如果 SVG 源码里自带
fill="#000"这类内联属性，它会覆盖 CSS，必须删掉或用!important（不推荐）强行覆盖
fill: currentColor 是最省事的颜色联动方案
硬写 fill: #3b82f6 看似简单，但换主题、切深色模式、改按钮文字色时就得同步改一堆地方。用 currentColor 就不用操心——它自动取父元素的 color 值。
前提是两件事做对：SVG 路径上不能有内联 fill，且 CSS 规则要作用在 path 等图形子元素上，不是 <svg> 标签本身。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
svg.icon path { fill: currentColor; }—— 推荐写法，明确作用目标 -
svg.icon { color: #ef4444; }—— 父容器设 color，图标自动响应 - IE 不支持
fill: currentColor（Edge 12+ OK），需降级时可加 JS 判断或预设类名
用 em 单位 + font-size 控制大小最灵活
直接写 svg { width: 24px; height: 24px; } 能缩放，但无法随文本一起响应式变化。更健壮的做法是去掉 SVG 标签上的 width/height 属性，只留 viewBox，再用 em 驱动尺寸。
因为 em 继承自父元素的 font-size，按钮文字变大、缩放字体时图标自然跟着变，不用额外媒体查询。
-
svg.icon { width: 1em; height: 1em; }—— 必须配viewBox，否则会拉伸或裁剪 - 别漏掉
viewBox：导出 SVG 时关掉 Sketch/Figma 的 “Inline styles” 和 “Responsive” 选项，确保它存在且值合理（如viewBox="0 0 24 24"） - 如果想用 CSS 变量，写成
width: calc(var(--icon-size, 1em) * 1);比width: var(--icon-size)更安全，避免变量未定义时失效
用 CSS 变量统一管理多图标主题色和尺寸
项目里图标一多，靠一个个 class 改 fill 或 width 很难维护。把颜色和尺寸抽成变量，在 :root 或组件级统一定义，是最可持续的方式。
但要注意：CSS 变量不会自动继承到 width 这类非继承属性上，所以不能只靠 var(--icon-color) 控制 fill，还得配合 currentColor 或显式声明在路径选择器里。
:root { --icon-color: #333; --icon-size: 1.25em; }svg.icon path { fill: var(--icon-color); }svg.icon { width: var(--icon-size); height: var(--icon-size); }- JS 动态切换：
document.documentElement.style.setProperty('--icon-color', 'red');
最容易被忽略的是 viewBox 缺失和内联 fill 属性残留——这两个问题占了“改了没反应”案例的八成以上。
