Html 将CSS引用的外部svg文件放置在何处？

我试图从CSS中引用SVG过滤器。两者都是外部的

当SVG过滤器def是内联的时，它可以正常工作，但在外部文件中时不工作。 我不希望SVG内联以避免出现臃肿的html文件

根据这一点，如果svg与html来自“相同的来源”，那么它应该可以工作。我不清楚“同源”是什么意思

我的目录结构是： index.html \css

我尝试了所有这些，但都没有成功：

• 将svg文件放在带有索引的根目录下
• 以及在css目录中
• 使用路径url（css/test.svg#LightItUp）
• 将css像这样内联：#LightItUp{filter:url（css/test.svg#LightItUp）}

svg内容：

<svg width="500" height="262" viewBox="0 0 200 150"  >
<defs> 
  <filter id="LightItUp" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="420">

  <!-- Apply a uniform blur of the 
       alpha channel -->
  <feGaussianBlur in="SourceAlpha" 
     stdDeviation="3" result="blur"/>
  </filter>
</defs>
</svg>

---

任何帮助都将不胜感激

将其添加到与普通图像类似的位置

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

我的直觉是，问题在于片段标识符（#LightItUp）在某些浏览器的css背景中不再受支持，可能它在过滤器中也不起作用。感谢您的建议，但过滤器仍然不适用

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>