做网站维护时，常会遇到这样的情况：设计稿里一组彩色图标，上传到网页后全部变成黑色剪影，原本的强调色、状态色全部丢失。用户第一反应往往是“图片坏了”，于是重新导出、重新上传，反复几次结果依旧。这类问题多数不是文件损坏，而是颜色在从源文件到页面呈现的链路上被某一层覆盖或剥离了。按顺序逐层核对，比盲目重传更有效。
第一步，先看源文件本身。用文本编辑器打开SVG，检查图形元素上是写了fill和stroke属性，还是把颜色写在了style里。如果颜色只存在于外部CSS，而文件本身没有内联颜色，那么它一旦离开原来的样式环境，就会回退到默认的黑色填充。这是最常见的原因之一。确认方法很简单：单独在浏览器中打开这个SVG文件，如果此时已经是黑色，问题就在文件自身。
第二步，检查页面CSS是否覆盖了图标内部颜色。SVG内部的fill属性优先级低于外部样式表中的选择器命中。如果全局样式里写了类似svg path的填充规则，或者图标被统一设置了颜色变量，内部颜色就会被压掉。这里要区分currentColor与内联样式的差异：使用currentColor的图标会继承父元素文字颜色，放在深色文字区域里自然变黑；而内联fill是固定值，不受外部文字颜色影响。判断时可以先临时把图标放进一个无样式的空白页面，看颜色是否恢复。
第三步，核对引用方式。用img标签引入SVG时，外部CSS无法进入文件内部，颜色以文件自身为准；内联SVG则完全暴露在页面样式中，容易被全局规则影响；background-image方式引入的SVG同样与页面样式隔离，但无法用CSS变量控制内部颜色。三种方式对颜色的可控程度不同，颜色变黑往往发生在从内联改为img、或从img改为内联的切换过程中，需要确认当前页面用的是哪一种。
第四步，排查构建与压缩环节。部分压缩工具会移除被认为冗余的样式属性，或者把fill统一简化为默认值。如果源文件正常、页面样式也干净，但上线后才变黑，就要对比压缩前后的文件内容，看颜色属性是否在构建阶段被删掉。
第五步，按清单逐层核对：源文件单独打开是否正常；页面全局样式是否命中图标内部元素；引用方式是否与颜色控制需求匹配；构建产物与源文件是否一致；浏览器缓存是否加载了旧版本。五层依次排除，基本能定位到具体环节。
日常维护中，建议在上传前保留一份带内联颜色的源文件，并在交付说明中注明图标的颜色控制方式，避免后续改版时误覆盖。it数运在网站维护流程中，会把图标文件的颜色写法、引用方式和样式依赖一并记录，减少这类问题在版本更新后重复出现。
