如何通过CSS加载SVG图标？现有实现方案遇阻求助

你遇到的问题核心是CSS语法错误，加上对CSS加载SVG的方式理解有误，下面一步步拆解问题并给出可落地的修复方案：

核心问题1：CSS中直接嵌入SVG标签完全无效 #

你当前的CSS写法违反了CSS语法规范——CSS选择器的规则块里只能写CSS属性，根本不能直接嵌套HTML/SVG标签。.icon-product1子类里的SVG代码属于HTML范畴，浏览器完全无法解析这段错误代码。

核心问题2：用url()加载SVG失败的常见原因 #

如果尝试过加载外部SVG文件但没成功，大概率是这几个问题：

• 路径错误：相对路径要以CSS文件的位置为基准，而不是HTML文件的位置
• SVG颜色适配问题：如果SVG里的fill/stroke是固定颜色，不会继承父类的color属性，需要把这些属性改为currentColor或inherit
• CSS属性误用：加载背景SVG需要用background-image，还要配合background-size等属性确保图标正常显示

正确实现方案 #

根据你的需求，推荐两种实用的实现方式：

方案1：外部SVG文件 + CSS背景图 #

1. 把SVG代码保存为独立文件（比如icon-product1.svg），并确保内部颜色属性适配currentColor：

<!-- icon-product1.svg -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.7 17.6" xml:space="preserve">
  <path stroke="currentColor" stroke-width="0.4" class="st0" d="some svg code here"></path>
</svg>

2. 修改CSS代码，用背景图方式加载SVG：

.icon-no-background {
  position: absolute;
  top: 0;
  left: 0;
  color: #aaabb6;
  width: 1.28rem;
  height: 1.28rem;
}

.icon-no-background.icon-product1 {
  background-image: url('icon-product1.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

方案2：伪元素内嵌SVG（Data URI形式） #

如果不想单独保存SVG文件，可以把SVG转为Data URI，通过伪元素插入页面：

.icon-no-background {
  position: absolute;
  top: 0;
  left: 0;
  color: #aaabb6;
  width: 1.28rem;
  height: 1.28rem;
}

.icon-no-background.icon-product1::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.7 17.6' xml:space='preserve'%3E%3Cpath stroke='currentColor' stroke-width='0.4' class='st0' d='some svg code here'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

注意：SVG转为Data URI时需要转义特殊字符（比如双引号），上面示例已完成基础转义。

HTML调用方式 #

直接给元素添加两个类即可：

<div class="icon-no-background icon-product1"></div>

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