为什么SVG在HTML中正常显示但作为CSS背景图片时无法渲染？

问题描述 #

我有一个SVG想要用作<select>元素的图标。
如果我将以下代码单独粘贴到div中可以正常运行，SVG可以成功渲染显示：

<svg xmlns='http://www.w3.org/2000/svg' width='15.826' height='9.413' viewBox='0 0 15.826 9.413'>
  <path id='Path_100' data-name='Path 100' d='M175.428,127l6.5,7,6.5-7' transform='translate(-174.015 -125.584)' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/>
</svg>

但当我将它作为背景图片写入CSS时，例如：

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18.899' height='10.449' viewBox='0 0 18.899 10.449'><path id='Path_5' data-name='Path 5' d='M553.826,51.436l8.035,8.035,8.035-8.035' transform='translate(-553.826 -51.436)' fill='none' stroke='#fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>");

它无法正常运行，没有任何内容显示。但我使用同样的方式可以正常加载其他SVG图标。
我的完整CSS类代码如下：

.select1 {
  width: 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15.826' height='9.413' viewBox='0 0 15.826 9.413'><path id='Path_100' data-name='Path 100' d='M175.428,127l6.5,7,6.5-7' transform='translate(-174.015 -125.584)' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 50%;
}

请问是什么原因导致该SVG在HTML中显示正常，但作为CSS背景图片时无法显示？

原因及解决方案 #

核心问题出在SVG代码中的十六进制颜色标识#上。#属于URL中的特殊保留字符，功能是标识URL片段，浏览器解析data:image/svg+xml类型的URI时，会将#之后的内容判定为资源片段直接截断，导致SVG代码不完整，无法正常渲染。
你可以任选以下一种方案解决：

• 方案1：将所有十六进制颜色值中的#替换为URL编码后的%23，比如stroke='#000'改为stroke='%23000'
• 方案2：将十六进制颜色值替换为颜色关键字，比如#000改为black
• 方案3：将整个SVG内容转为base64编码后再放入url()中，彻底避免特殊字符解析问题

修正后的CSS示例：

.select1 {
  width: 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15.826' height='9.413' viewBox='0 0 15.826 9.413'><path id='Path_100' data-name='Path 100' d='M175.428,127l6.5,7,6.5-7' transform='translate(-174.015 -125.584)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: 98% 50%;
}

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