CSS Sprite与SVG是否兼容？如何实现SVG雪碧图及修改图标填充色？

实现背景图形式的SVG Sprite操作步骤 #

问题根源 #

你遇到的所有图标全部展示、尺寸过小的问题，是因为SVG作为背景时默认没有适配背景尺寸，且你的SVG精灵文件没有配置正确的viewport规则，和PNG精灵的使用逻辑存在差异。

1. 预处理SVG精灵文件 #

打开你的SVG精灵文件，在根<svg>标签上配置正确的viewBox属性：
假设你所有图标尺寸都是2424，横向排列共3个，总尺寸为7224，就设置viewBox="0 0 72 24"，同时删除<svg>标签上固定的width、height属性，以及每个图标路径上写死的fill属性（有改色需求的话）。

2. 调整CSS代码 #

和PNG精灵不同，SVG背景需要额外配置background-size，值和SVG精灵的总尺寸保持一致，再通过background-position控制偏移，修正后的代码如下：

/* 通用图标样式，抽离重复逻辑 */
._ico {
  width: 24px;
  height: 24px;
  margin-right: 2px;
  background: url(../media/icons/toolbar/toolbar-icon-svg-type-01.svg) no-repeat;
  /* 核心配置：背景尺寸和SVG精灵总尺寸一致 */
  background-size: 72px 24px;
}
/* 单个图标位置控制 */
.icon-one ._ico {
  background-position: 0 0;
}
.icon-two ._ico {
  background-position: -24px 0;
}
.icon-three ._ico {
  background-position: -48px 0;
}

SVG Sprite的fill颜色修改说明 #

分两种使用场景：

• 背景图形式的SVG Sprite：无法直接通过CSS修改fill颜色，因为外部背景图属于独立资源，CSS无法穿透修改内部属性。如果需要改色，要么提前在SVG文件中制作多个不同颜色的图标版本，要么使用CSS filter属性模拟颜色调整，但精度和兼容性有限。
• 内联形式的SVG Sprite：如果需要灵活修改颜色，更推荐将SVG精灵代码直接内嵌到HTML页面头部，设置display: none隐藏，使用时通过<use>标签调用对应图标，这种场景可以直接给SVG标签设置fill属性修改颜色，示例代码如下：

<!-- 页面头部内嵌SVG Sprite -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-one" viewBox="0 0 24 24">
    <!-- 对应图标的路径代码 -->
  </symbol>
  <symbol id="icon-two" viewBox="0 0 24 24">
    <!-- 对应图标的路径代码 -->
  </symbol>
  <symbol id="icon-three" viewBox="0 0 24 24">
    <!-- 对应图标的路径代码 -->
  </symbol>
</svg>

<!-- 页面中调用图标 -->
<div class="icon-one">
  <svg class="_ico" fill="#f00">
    <use xlink:href="#icon-one"></use>
  </svg>
</div>
<div class="icon-two">
  <svg class="_ico" fill="#0f0">
    <use xlink:href="#icon-two"></use>
  </svg>
</div>

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