主题构建时SVG内RGBA颜色自动转Hex导致菜单图标不显示问题咨询

问题原因 #

• 构建工具自带的CSS优化逻辑导致的：目前主流的前端构建工具（比如Webpack、Vite、主题构建工具）都会默认集成PostCSS、cssnano这类CSS压缩优化工具，这类工具的颜色转换规则会自动把CSS中所有识别到的rgba、rgb颜色值转换为更短的十六进制颜色码，降低CSS文件体积。而你把SVG写在data URI里，优化工具会误将SVG属性中的rgba值也识别为CSS颜色值进行转换，就出现了你遇到的自动转换情况。
• 转换后图标失效的核心原因：#是URL中的特殊字符，代表锚点的起始位置。转换后的十六进制颜色码以#开头，直接放在data URI中未做转义的话，浏览器会把#之后的内容识别为URL片段，截断SVG内容，导致SVG解析失败，图标无法显示。

解决方案 #

• 方案1：修改构建工具的CSS优化配置。找到你项目中cssnano或PostCSS的配置项，关闭colormin（颜色压缩）规则，或者配置规则忽略对data URI内部内容的颜色转换。以PostCSS配置为例：

// postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({
      preset: ['default', {
        colormin: false // 关闭颜色自动转换
      }]
    })
  ]
}

• 方案2：提前转义十六进制的特殊字符。如果你不想修改构建规则，可以直接将SVG中stroke属性的颜色值里的#转义为URL编码%23，修改后的CSS代码如下：

#keyword div {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23F74D4D' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")
}

• 方案3：对整个SVG内容进行URL编码。将所有SVG的特殊字符（包括<、>、#、引号等）都转换为对应的URL编码格式，从根源避免特殊字符被浏览器误解析。

内容的提问来源于stack exchange，提问作者Hemant