如何将SVG作为background-image，通过xlink引用原文档内联图标库的ID？

嘿，这个内联SVG图标库+background-image引用的方案确实高效又灵活，我来一步步给你讲清楚怎么实现：

核心思路 #

你已经把包含<symbol>的SVG内联到了文档底部，接下来要做的就是在CSS的background-image里引用这些symbol。这里有两种靠谱的方法，兼容性和易用性各有侧重：

方法1：Data URI 引用（兼容性最优） #

这是最稳妥的方式，几乎所有现代浏览器都支持。你只需要把引用symbol的SVG片段转换成Data URI，作为background-image的值：

/* 引用icon1作为背景 */
.icon1-container {
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><use href="#icon1" xlink:href="#icon1"></use></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

/* 引用icon2，还可以动态改颜色 */
.icon2-container {
  width: 100px;
  height: 100px;
  color: orange; /* 用currentColor继承这个颜色 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><use href="#icon2" xlink:href="#icon2" fill="currentColor"></use></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

细节说明：

• 同时写href和xlink:href是为了兼容旧版浏览器（比如IE11），现代浏览器只需要href就够了
• background-size: contain能保证图标按比例缩放，不会变形
• 用fill="currentColor"可以让图标颜色继承父元素的color属性，方便通过CSS动态修改

然后在HTML里直接用类名就行：

<div class="icon1-container"></div>
<div class="icon2-container"></div>

方法2：直接引用文档内的Symbol（仅现代浏览器支持） #

一些较新的浏览器允许直接引用文档内的SVG资源，写法更简洁，但兼容性不如Data URI：

.icon1-container {
  width: 100px;
  height: 100px;
  background-image: url('#icon1');
  background-size: contain;
  background-repeat: no-repeat;
}

这种写法省去了Data URI的拼接，但要注意：旧版Chrome、Firefox以及IE都不支持，所以如果需要兼容老浏览器，优先选方法1。

额外注意事项 #

• 内联在文档底部的SVG可以设置display: none，不影响symbol的引用，因为<symbol>本身就是用于复用的不可见元素
• 每个<symbol>的viewBox属性一定要正确设置，它决定了图标在缩放时的坐标系统，你的示例里已经加了，这点做得很对～

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