能否在CSS中引用页面内SVG？如何将其用作背景图？

已知可在部分CSS/SVG属性中通过ID引用SVG元素，示例代码如下：

<!-- the logo svg -->
<svg id="rect-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- left squares -->
    <rect fill="url(#rect-fill)"/>
</svg>

想请教是否可以将页面内的SVG用作CSS背景图，以此避免在CSS中对SVG进行编码？我曾尝试如下写法，但未达到预期效果：

.myel {
  background-image: url(#rect-svg-image);
}

可以实现，但直接用 url(#ID) 的写法不符合CSS背景图的URI规范，所以无法生效。下面是两种可行的方案：

方案一：利用SVG <symbol> + Data URI #

这种方法可以复用页面内的SVG资源，同时避免在CSS里编码完整SVG内容：

1. 先把页面内的SVG改写成<symbol>形式并隐藏（仅作为资源引用）：

<svg style="display: none" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义可复用的符号 -->
  <symbol id="rect-container">
    <rect width="50" height="50" fill="url(#rect-fill)"/>
    <!-- 渐变等资源定义需放在symbol内部或SVG根节点 -->
    <linearGradient id="rect-fill" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff4444"/>
      <stop offset="100%" stop-color="#4444ff"/>
    </linearGradient>
  </symbol>
</svg>

2. 在CSS中通过Data URI结合<use>标签引用这个符号：

.myel {
  width: 200px;
  height: 200px;
  /* 注意#要转义为%23，避免URI解析错误 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><use href="%23rect-container"/></svg>');
  background-size: cover;
}

方案二：直接引用隐藏的完整SVG #

如果不想用<symbol>，也可以直接把完整SVG隐藏，再通过Data URI引用它的ID：

1. 页面内的SVG设置为隐藏：

<svg id="rect-container" style="display: none" xmlns="http://www.w3.org/2000/svg">
  <rect width="50" height="50" fill="url(#rect-fill)"/>
  <linearGradient id="rect-fill" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#ff4444"/>
    <stop offset="100%" stop-color="#4444ff"/>
  </linearGradient>
</svg>

2. CSS中同样用Data URI包裹<use>标签：

.myel {
  width: 200px;
  height: 200px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><use href="%23rect-container"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

关键注意点 #

• 必须隐藏页面内的SVG，避免它直接显示在页面上
• URI中的#需要转义为%23，否则浏览器会把它当成Data URI本身的片段标识符，而非SVG内部的ID引用
• 如果SVG内部包含渐变、滤镜等资源，要确保这些定义在<symbol>内部或SVG根节点中，防止引用失效

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